Javascript動畫（）滾動不能按預期工作

Question

當我使用下面的代碼時，它變得非常糟糕。

動畫完成後，我滾動並翻動頁面（文檔）。

$(document).ready(function(){ 
    $(' .nav, .learn-more').click(function(event){ 
     $('html, body').animate({ 
     scrollTop: $("#"+event.target.id+".featurette").offset().top 
     }, 1000); 
    }); 
}); 

請參閱演示Codecademy。

Answer 1

彈跳發生在動畫尚未完成且腳本會保持頁面滾動時，然後您嘗試反向滾動，並且由於jQuery動畫的工作方式，您的反滾動會被繼續重置的滾動動畫。

看着你的linked example，我發現你的動畫爲什麼會跳動。您使用的連接單擊處理程序的選擇是​​，並在你的HTML，有2個.nav S，一個是另一個的孩子：

<div class="nav">
        <div class="container">
                <ul class="pull-leftnavnav-pills">
                        <li><a id="" href="#">Home</a></li>

正因爲如此，動畫被稱爲兩次，導致閃爍。您應該將選擇器修改爲$('.nav .nav, .learn-more')，或使用更獨特的東西，如$('.nav.nav-pills, .learn-more')。

$('.nav .nav, .learn-more').click(function(event){ 
    $('html, body').animate({ 
     scrollTop: $("#"+event.target.id+".featurette").offset().top 
    }, 2000); 
}); 

這裏的代碼共享您選擇的平臺的固定代碼：http://www.codecademy.com/DJDavid98/codebits/GSoDQf