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

Question

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

可在此处找到现场演示：www.rouvou.com/KanyeWest。转到评论部分，然后滚动它以触发第一个 jquery 滚动。然后点击 "Back" 按钮触发第二次滚动。它可能会在你尝试的前几次立即起作用，但如果你做得足够多，它最终应该会延迟。

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 菊花链动画。然后您在每滚动时启动动画。所以你滚动的越多，700 毫秒的动画就越多 "pile up"，因此你的返回动画等待它们全部完成。

可能最好更新您的代码以避免主体上出现链式 scrollTop 动画。

但是，现在您可以使用 jQuery 的 stop 函数解决此问题。即：

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

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

Click-triggered scrollTop takes random amount of time to fire

javascript

jquery

onclick

scrolltop