Question

我正在使用Twitter Bootstrap构建一个网站，我使用以下javascript获得了scrollspy：

$('body').scrollspy({ target: '.navbar' })

但在我添加脚本以启用平滑滚动后，它停止了我的工作：

<script type="text/javascript">
$(document).ready(function() {
  // navigation click actions 
  $('.scroll-link').on('click', function(event){
    event.preventDefault();
    var sectionID = $(this).attr("data-id");
    scrollToID('#' + sectionID, 750);
  });
  // scroll to top action
  $('.scroll-top').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'slow');     
  });
  // mobile nav toggle
  $('.nav-toggle').on('click', function (event) {
    event.preventDefault();
    $('#bs-example-navbar-collapse-1').toggleClass("open");
  });
});
// scroll function
function scrollToID(id, speed){
  var offSet = 70;
  var targetOffset = $(id).offset().top - offSet;
  var mainNav = $('#bs-example-navbar-collapse-1');
  $('html,body').animate({scrollTop:targetOffset}, speed);
  if (mainNav.hasClass("open")) {
    mainNav.css("height", "1px").removeClass("in").addClass("collapse");
    mainNav.removeClass("open");
  }
}
if (typeof console === "undefined") {
    console = {
        log: function() { }
    };
}
</script>

我想我必须在不正确的位置添加scrollspy。我对javascript知之甚少。如果有人能指出我按正确的顺序/空格/行插入它的方式，那就太棒了！

提前致谢！

Answer 1

您可能希望使用第三方插件，例如jquery.localScroll（依赖于jquery.scrollTo）。它提供了很好的平滑滚动，易于实现。比重新实现轮子容易得多。

https://github.com/flesler/jquery.localScroll

Bootstrap：在我添加了平滑滚动后，scrollspy不起作用

1 个答案: