仅当用户未滚动时，如何才能运行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库支持的缓动函数。