我如何 运行 jQuery 仅在用户没有滚动时才起作用？

Question

我一直在尝试在我的网站上加入自动滚动功能 (live here)。我希望它在加载后 6 秒滚动到内容，但前提是用户位于页面的最顶部并且没有滚动到足以发现#introduction 元素。

我有这段代码，它可以工作，但如果用户已经自己滚动了，我不希望它执行：

$('html,body').delay(6000).animate({
    scrollTop: $('#introduction').offset().top
}, 1000);

如果可能的话，我也希望它能以一种缓入缓出的方式发生。

Answer 1

你可以这样做：

$('html')
  .delay(6000)
  // If the user has scrolled down, do nothing. Otherwise scroll to element
  .queue(function(next) {
    if ($(window).scrollTop() > 0) {
      return;
    } else {
      next();
    }
  })
  .animate(
    {
      scrollTop: $('#introduction').offset().top,
    },
    1000,
    'swing',
  );

至于 ease-in-out 动画，您需要 JqueryUI。 swing 和 linear 是 Jquery 库支持的缓动函数。