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