How can I run jQuery function only if user hasn’t scrolled?

Question

I’ve been trying to incorporate an auto scroll function on my website (live here). I want it to scroll to the content 6 seconds after load, but only if the user is on the very top of the page and hasn’t scrolled enough to uncover the #introduction element.

I have this code, which works, but I don’t want it to execute if the user has already scrolled by themself:

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

I would also like it to happen with a type of ease-in-out, if possible.

Answer 1

You can do something like this:

$('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',
  );

As for the ease-in-out animation you need JqueryUI for that. swing and linear are the Jquery library supported easing functions.