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.

This could be considered bad Interaction Design to force a scroll, why not give the user the choice to scroll if they choose by providing a down arrow? — Nathaniel Flick, Dec 01 '19 at 22:11

5eb · Accepted Answer · 2019-12-02T15:31:53.740

0

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.

edited Dec 02 '19 at 15:31

answered Dec 01 '19 at 22:07

5eb

14,798
5
21
65

I successfully incorporated the swing easing but when I add the .queue, it breaks the function and makes it do nothing. I don’t understand why. – Infernoid Seitsemas Dec 02 '19 at 15:03
@seitsemas my bad I made a small mistake in the if statement. Does it work now? – 5eb Dec 02 '19 at 15:32
It did! Thank you! It’s now fixed. – Infernoid Seitsemas Dec 02 '19 at 18:02

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

1 Answers1