2017-08-14 4 views
1

スムーズなスクロールは完全に機能しますが、アンカーはページの最上部で停止しますが、ナビゲーションバーはトップに固定されています私はそれが必要な、navbarの高さでトップをオフセットされています。私はこれについてどうやって行くのですか?スムーズスクロールでオフセットを変更する方法navbarの高さでのJQueryアニメーション

<script> 
    $(document).ready(function(){ 
    // Add smooth scrolling to all links 
    $("a").on('click', function(event) { 

     // Make sure this.hash has a value before overriding default behavior 
     if (this.hash !== "") { 
     // Prevent default anchor click behavior 
     event.preventDefault(); 

     // Store hash 
     var hash = this.hash; 

     // Using jQuery's animate() method to add smooth page scroll 
     // The optional number (800) specifies the number of milliseconds 
     // it takes to scroll to the specified area 
     $('html, body').animate({ 
      scrollTop: $(hash).offset().top 
     }, 1000, function(){ 

      // Add hash (#) to URL when done scrolling (default click behavior) 
      window.location.hash = hash; 
     }); 
     } // End if 
    }); 
    }); 
</script> 

答えて

0

かなり簡単:scrollTop: $('#hash').offset().top - navbarHeight

+0

navbarHeightを角かっこにする必要がありますか、特定のユニットを使用しますか? –

+0

@FilipGrebowskiの場合、 'scrollTop:$(hash).offset()。top-48'のような数字を使うことができます。または、次のようなものを使ってnavbarの高さをプログラムで取得します: 'scrollTop:$(hash).offset()。top- $(#navbarId).height()'。 –

+0

うーん..それは動作していないようです。私は論理に完全に同意することを意味しますが、効果がないか、完全にパターンなしでオーバーフローします。 –

関連する問題