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，我发现了为什么你的动画很跳跃。用于附加点击处理程序的选择器是$(' .nav, .learn-more')，在HTML中，有2 .nav个，其中一个是另一个的孩子：

<div class="的 nav ">
  <div class="container">
  <ul class="pull-left的 nav nav-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

Javascript animate（）滚动无法按预期工作

1 个答案: