如何为Bootstrap的滚动间谍功能添加平滑滚动

Question

我一直试图在我的网站上添加一个平滑的滚动功能一段时间,但似乎无法让它工作.

这是我的导航相关的HTML代码:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="675">
  <div class="navbar-inner" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact-arrow">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

这是我添加的JS代码:

<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script>

<script>
    $(document).ready(function(e) {

        $('#nav').scrollSpy()
        $('#nav ul li a').bind('click', function(e) {
            e.preventDefault();
            target = this.hash;
            console.log(target);
            $.scrollTo(target, 1000);
        });
    });
</script>

对于它的价值,这里是我收到的关于我到目前为止所做的事情的信息,这里是我现在的网站.如果你可以帮助我,我会给你一块馅饼或饼干或其他东西.谢谢!

Answer 1

你真的需要那个插件吗？您可以只为该scrollTop属性设置动画:

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

   // prevent default anchor click behavior
   e.preventDefault();

   // store hash
   var hash = this.hash;

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

       // when done, add hash to url
       // (default click behaviour)
       window.location.hash = hash;
     });

});

小提琴

Answer 2

如果你有一个固定的导航栏,你需要这样的东西.

从上述最佳答案和评论中汲取......

$(".bs-js-navbar-scrollspy li a[href^='#']").on('click', function(event) {
  var target = this.hash;

  event.preventDefault();

  var navOffset = $('#navbar').height();

  return $('html, body').animate({
    scrollTop: $(this.hash).offset().top - navOffset
  }, 300, function() {
    return window.history.pushState(null, null, target);
  });
});

首先,为了防止"未定义"错误,target在调用之前将哈希值存储到变量中,然后preventDefault()再引用该存储值,如pupadupa所述.

下一个.您无法使用,window.location.hash = target因为它同时设置网址和位置,而不是单独设置.您最终将位于元素开头的位置,其id与href相匹配...但由固定的顶部导航栏覆盖.

为了解决这个问题,您可以将scrollTop值设置为目标的垂直滚动位置值减去固定导航栏的高度.直接定位该值可以保持平滑滚动,而不是之后添加调整,并获得不专业的抖动.

您会注意到网址没有变化.要设置此项,请使用return window.history.pushState(null, null, target);手动将URL添加到历史堆栈中.

完成!

其他说明:

1)使用该.on方法是最新的(截至2015年1月)jquery方法,它比.bind或更好.live,或者甚至.click由于我将留给你找出的原因.

2)navOffset值可以在函数内部或外部,但您可能希望它在外面,因为您可能很好地引用其他函数/ DOM操作的垂直空间.但我把它留在里面,使它整齐地融入一个功能.

Answer 3

$("#YOUR-BUTTON").on('click', function(e) {
   e.preventDefault();
   $('html, body').animate({
        scrollTop: $("#YOUR-TARGET").offset().top
     }, 300);
});

Answer 4

// styles.css
html {
    scroll-behavior: smooth
}

来源：https : //www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2