Bootstramp模板jquery動畫bug

Question

我用這個模板用於我的網站 http://www.bootply.com/100702 但是，當你點擊菜單選項時，動畫菜單就是越野車和滯後。

點擊鏈接後，頁面閃爍錯誤的位置，然後顯示動畫。

我懷疑，這個問題是在這個代碼片段：

/* 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); 
}) 

該代碼使用點擊或改進動畫的另一種方法之間的延遲要求？

Answer 1

Bugginess來自ScrollSpy在您滾動時激活。 添加類spy-activated

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

目標類

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

切換間諜激活滾動時。記住手動調整的li元素

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

我發現的bug在此代碼。

您需要使用

e.preventDefault(); 

要禁用部分的默認使用。 正確的代碼：

$('#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); 
});