1. ホーム
  2. javascript

[解決済み] ページ上の特定の要素に移動するには?重複

2022-04-25 23:34:23

質問

HTMLページで、ページ上のある要素に「移動」/「スクロール」/「フォーカス」できるようにしたい。

通常であれば、アンカータグに href="#something" しかし、私はすでに、hashchange イベントと BBQプラグイン でこのページを読み込むことができます。

では、JavaScriptを使って、ページ上の指定された要素に移動させる方法は他にあるのでしょうか?

私がやろうとしていることの基本的なアウトラインは次のとおりです。

function focusOnElement(element_id) {
     $('#div_' + element_id).goTo(); // need to 'go to' this element
}

<div id="div_element1">
   yadda yadda 
</div>
<div id="div_element2">
   blah blah
</div>

<span onclick="focusOnElement('element1');">Click here to go to element 1</span>
<span onclick="focusOnElement('element2');">Click here to go to element 2</span>

解決方法は?

プラグイン形式の標準的な手法は、次のようなものです。

(function($) {
    $.fn.goTo = function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top + 'px'
        }, 'fast');
        return this; // for chaining...
    }
})(jQuery);

では、次のようにすればいい。 $('#div_element2').goTo(); にスクロールします。 <div id="div_element2"> . オプションの処理と設定方法は、読者への課題として残されています。