Question

我有一个带有按钮的导航栏，我希望Work向下滚动到工作部分。当我点击导航栏上的工作时，它会立即进入工作部分。我一直想弄清楚它，但我对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;
        }
    }
});

jquery button li a href平滑向下滚动到底部

2 个答案: