jquery按鈕li href平滑向下滾動至底部

Question

我有一個導航欄，其中包含我想要的按鈕向下滾動到工作區域。當我點擊我的導航欄上的工作時，它會立即轉到工作區域。我一直試圖弄清楚一段時間，但我對jQuery很新。

我的jQuery代碼將如何發生這種情況？

HTML

<div class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
    <!-- Button is for phones, toggles a drop down for navigation --> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle naviggation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html">JEROME REYES</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="#work">Work</a></li> 
    </ul> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
    $('a[href^="#"]').click(function(){ 
    $('html , body').animate({ 
     scrollTop:0 
    },'slow'); 
}) 

Answer 1

$(document).ready(function(){ 
    $('.navbar-nav li a').click(function(){ 
    $("html, body").animate({ 
     scrollTop: $($(this).attr('href')).offset().top - 0 
    }, 500); 
}); 
}); 

Answer 2

$('.nav-headers').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html, body').animate({ 
      scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
    } 
});