Bootstramp template jquery animation bug

Question

I used this template for my website http://www.bootply.com/100702 But the animated menu is buggy and laggy when you click on menu options.

After clicking on the link, page blinks wrong position and then animation is displayed.

I suspect that the problem is in this code snippet:

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700);
})

This code required to use delay between clicks or another method for improvement animation?

Answer 1

The bugginess comes from the ScrollSpy activating as you scroll along. Add class spy-activated

<div class="navbar navbar-custom navbar-inverse navbar-static-top spy-activated" id="nav">

Target the class

$('body').scrollspy({ target: '.spy-activated' })

Toggle spy-activated when scrolling. Remember to manually adjust "active" class on the li elements

/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
  $("#nav").removeClass("spy-activated");
  $(this).parent().siblings().each( function(){ $(this).removeClass("active"); });
  $(this).parent().addClass("active");
  var link = $(this).attr('href');
  var posi = $(link).offset().top+20;
  $('body,html').animate({scrollTop:posi},700, function(){
     $("#nav").addClass("spy-activated");
  });
})

bootply: http://www.bootply.com/YmaEAbUWEf

Answer 2

I found bug in this code.

You need to use

  e.preventDefault();

To disable default usage of section. Correct code:

$('#nav .navbar-nav li>a').click(function(e){
  var link = $(this).attr('href');
  var posi = $(link).offset().top;
  e.preventDefault();
  $('body,html').animate({scrollTop:posi},700);
});