1

我正在使用 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>

我在想我一定是在不正确的位置添加了滚动间谍。我对javascript知之甚少。如果有人能指出以正确的顺序/空格/行插入它的方法,那就太好了!

提前致谢!

4

1 回答 1

0

您可能想要使用第三方插件,例如 jquery.localScroll(它依赖于 jquery.scrollTo)。它提供了非常流畅的滚动并且易于实现。比重新实现轮子要容易得多。

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

于 2014-03-11T02:16:36.843 回答