web-dev-qa-db-ja.com

ページの読み込み時にjQueryがアンカーの場所に移動する

次のような簡単なページ設定があります。

<div id="aboutUs">
  About us content...
</div>
<div id="header">
  Header content...
</div>

ページがロードされると、ページを自動的にスクロールダウンして（アニメーションは不要）#headerにする必要があるため、ユーザーはスクロールアップしない限りAbout Us divを見ることができません。

#aboutUsの高さは固定されているため、高さなどを決定するための変数は必要ありません。

私は この他の質問 に出会い、私の状況に応じていくつかの答えを修正しようとしましたが、何もうまくいかないようでした。

任意の助けをいただければ幸いです。

jqueryscrollanchor
69
scferg5

説明

これを行うには、jQueryの.scrollTop()および.offset()メソッドを使用します

私のサンプルとこれを確認してください jsFiddle Demonstration

サンプル

$(function() {
    $(document).scrollTop( $("#header").offset().top );  
});

詳しくは

119
dknaack

JQueryのscrollToメソッドを試しましたか？ http://demos.flesler.com/jquery/scrollTo/

または、JQueryを拡張し、カスタムメントを追加できます。

jQuery.fn.extend({
 scrollToMe: function () {
   var x = jQuery(this).offset().top - 100;
   jQuery('html,body').animate({scrollTop: x}, 400);
}});

次に、このメソッドを次のように呼び出すことができます。

$("#header").scrollToMe();
26
Naveed

これをページの下部にある終了Bodyタグの直前に配置します。

<script>
    if (location.hash) {
        location.href = location.hash;
    }
</script>

jQueryは実際には必要ありません。

16
Chris Pietschmann