ホーム>source

次のjqueryコードを使用して、ナビゲーションタブのメニューがクリックされたときに特定のセクションにスクロールします。あなたは今では1ページのウェブサイトであるとよく推測しているに違いありません。さらに先に進むと、メニューをクリックすると特定のDIVセクションまでスクロールするが、メニューのdivの後ろにヘッダーが隠れてしまうという問題があります。スクロールが大きすぎます。スクロールのレベルを制限したい。実際に停止点に到達するよりも200px前に停止する必要があるとしましょう。出来ますか?

ここに私のコードがあります

$(document).ready(function() {
    $('body').find('a').click(function(){
      var $href = $(this).attr('href');
      var $anchor = $($href).offset();
      var $li = $(this).parent('li');
      $li.addClass('active');
      $li.siblings().removeClass('active');
      $('body,html').animate({ scrollTop: $anchor.top }, 1000);
      return false;
    });
});

あなたの答え
  • 解決した方法 # 1

    ヘッダー値をハードコーディングする代わりに、ヘッダーの高さを動的に取得することをお勧めします。そのため、モバイルやその他のデバイスで問題が発生することはありません。

    $(document).ready(function() {
            $('body').find('a').click(function(){
              var $heightEx = $('.navbar').height(); // use your respective selector
              var $href = $(this).attr('href');
              var $anchor = $($href).offset();
              var $li = $(this).parent('li');
              $li.addClass('active');
              $li.siblings().removeClass('active');
              $('body,html').animate({ scrollTop: ($anchor.top - $heightEx)  }, 1000);
              return false;
            });
        });
    
    

    編集
    これは私が個人的に使用するコードです

    $("a").on('click', function(event) {
    $heightEx = $('header').height(); 
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: ($(hash).offset().top - $heightEx)
      }, 800);
    }
    
    

    });

  • 解決した方法 # 2

    たぶん、あなたは 'animate' scrollTopパラメーターを変更する必要があります:

    $('body,html').animate({ scrollTop: $anchor.top - 200px }, 1000);
    
    

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ gcc - 独自のメイクファイルを作成する[エラー255]