如何使用scollTop功能啓用Bootstrap平滑滾動？

Question

我已經創建了一個自定義的「subnavbar」，位於bootstrap的導航欄下。它基於wrapbootstrap的代碼。

我想啓用使用scrolltop平滑滾動。我有以下Javascript：

$(document).ready(function(e) { 

     $('#subnav').bind('click', function(e) { 
      e.preventDefault(); 
      $('html,body').animate({scrollTop: $(this.hash).offset().top});               
     }); 
    }); 

但是，我似乎無法使其工作。我使用了錯誤的＃參考嗎？這裏是一個bootply：http://bootply.com/62720

HTML片段如下：

     <!-- Subnav bar -->     
        <div class="subnav subnav-fixed"> 
         <ul class="nav nav-pills"> 
          <li><a href="#overview">Overview</a></li> 
          <li><a href="#opening-hours">Opening hours</a></li> 

         </ul> 
        </div> 
<section id="Overview">   
<h3>OVERVIEW</h3> 

感謝

Answer 1

非常簡單和容易犯的錯誤 「#subnav」 應爲 「.subnav一個」 首先是因爲subnav是類其次，因爲你想要點擊綁定到鏈接

Answer 2

這樣的事情將起作用。這將設置頂部0時沒有偏移（）

$('.subnav li a').bind('click', function(e) { 
    e.preventDefault(); 

    var hashTag = this.hash; 
    var top = 0; 

    if ($(hashTag).offset()) { 
     top = $(hashTag).offset().top 
    } 

    $('html, body').animate({scrollTop:top}, 'slow');               
}); 

這裏是更新：http://bootply.com/62723