在平滑滾動上添加邊距

Question

我將平滑滾動添加到我的單頁自由網站。 每當滾動到頁面它顯示了從公元前修復頂部導航欄部分的頂部60像素的滾動看起來像這樣，當它向下滾動

當我想它推60px下來，向下滾動看起來像這樣。

我從公元前W3他們的解決方案似乎是最簡單的拉滾動碼。剛開始使用jQuery更多，所以任何幫助將不勝感激。 下面的代碼使用：

<script> 
    $(document).ready(function(){ 
    $(".navbar a, footer a[href='#myPage']").on('click', function(event) { 

    if (this.hash !== "") { 

     event.preventDefault(); 

     var hash = this.hash; 

     $('html, body').animate({ 
     scrollTop: $(hash).offset().top 
     }, 1100, function(){ 

     window.location.hash = hash; 
     }); 
     } // End if 
    }); 
    }) 
</script> 

Answer 1

我其實有關的附加解決這個問題我自己 - 後頂部$（散）60 .offset（）頂部

更改部分，如果任何人有過這樣的問題：

('html, body').animate({ 
scrollTop: $(hash).offset().top - 60 
}, 1100, function(){ 

Answer 2

我會建議作出補償基礎上，.navbar高度，而不是硬編碼的高度，所以如果內容的變化，或者你重用代碼，你不必繼續去改變它。您還可以改進腳本處理散列的方式，並允許以散列開頭的任何URL具有平滑滾動：

$(function() { 
    $('a[href^="#"]').on('click', function(e) { 

     if (this.hash !== '') { 
      e.preventDefault(); 

      var hash = this.hash; 
      var nav = $('.navbar').outerHeight(); 

      $('html, body').animate({ 
       scrollTop: $(hash).offset().top - nav 
      }, 1100, function() { 
       window.location.hash = hash; 
      }); 
     } 
    }); 
});