Question

我有一个评论部分，当你滚动它时会自动滚动到视图中（使用jQuery scrollTop），然后是一个按钮，当你点击它时会滚动你。第一个滚动动作总是完美运行，但第二个滚动动作在按下按钮后需要一段看似随机的时间。

现场演示可以在这里找到：www.rouvou.com/KanyeWest。转到注释部分，然后滚动它以触发第一个jquery滚动。然后点击＆＃34;返回＆＃34;用于触发第二个滚动的按钮。它可能会在你尝试的前几次立即工作，但如果你做得足够，最终应该推迟。

HTML

<div id="comment-section">
  <div id="comment-background-up">BACK</div>
  <div id="good_comments"><!--CONTENT--></div>  
  <div id="bad_comments"><!--CONTENT--></div>
</div>

jquery的

$("#good_comments").scroll(function() {
  $('html, body').animate({
      scrollTop: $("#good_comments").offset().top
  }, 700);
  $("#comment-background-up").fadeIn(200);
});
$("#bad_comments").scroll(function() {
  $('html, body').animate({
      scrollTop: $("#bad_comments").offset().top
  }, 700);
  $("#comment-background-up").fadeIn(200);
});
$("#comment-background-up").click(function() {
  $('html, body').animate({
      scrollTop: $("#randomajax").offset().top
  }, 700);
  $(this).fadeOut(200);
});

有谁知道造成这种延迟的原因是什么？

Answer 1

我认为这种情况正在发生，因为jQuery以菊花链方式连接动画。然后在每个滚动条上启动动画。所以你滚动得越多，动画就越多，动画就越多，＃34;堆积起来＃34;因此你的回归动画等待它们全部完成。

最好更新代码以避免在主体上链接scrollTop动画。

但是，现在你可以通过使用jQuery的stop函数来解决这个问题。即：

$("#comment-background-up").click(function() {
  $('html, body').stop(true, true).animate({
      scrollTop: $("#randomajax").offset().top
  }, 700);
  $(this).fadeOut(200);
});

点击触发的scrollTop需要随机的时间来触发

1 个答案: