☰

ページ上の特定の要素に移動するにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon javascript jquery html
ページ上の特定の要素に移動するにはどうすればいいですか? [重複] 質問する

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

通常、アンカータグを と一緒に使用しますhref="#something"が、私はすでに と一緒にハッシュ変更イベントを使用しています。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>

ベストアンサー1

要素が現在ページ上に表示されていない場合は、ネイティブのscrollIntoView()方法。

$('#div_' + element_id)[0].scrollIntoView( true );

はtrueページの上端に揃えることを意味し、falseは下端に揃えることを意味します。

そうでなければ、プラグscrollTo()インjQuery の場合は使用できます。

あるいは、top position()(ドキュメント)要素のscrollTop()(ドキュメント)その位置に：

var top = $('#div_' + element_id).position().top;
$(window).scrollTop( top );

おすすめ記事