引导程序：我添加平滑滚动后，scrollspy不起作用

Question

I'm building a site using Twitter Bootstrap, and I got the scrollspy to work, using the below javascript:

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

But it stopped working for me, after I add the script to enable smooth scrolling:

<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>

I'm thinking I must have added the scrollspy in an incorrect position. I have very little knowledge of javascript. If someone can point me the way to inserting it in the correct order/space/line, that would be great!

Thanks in advance!

Answer 1

You may want to use a third party plugin such as jquery.localScroll (which relies on jquery.scrollTo). It provides great smooth scrolling and is easy to implement. A lot easier than reimplementing the wheel.

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