I want a scroll event listener to fire when the user scrolls the page for the first time, but then to stop firing after a certain amount of time and just allow the user to scroll normally.

Here's how I've currently got it working:

var scrollcount = 0

// Scroll event listener

  window.addEventListener("scroll", function() {
    setTimeout(function() {
    scrollcount ++
    if (scrollcount < 40) {
        window.scrollTo(0, 0);
    }
}, 1200);
  });

The scrollcount variable increments along with scrolling, and 40 is about how much it takes for one scroll up on my laptop's trackpad. If the counter is under 40, the page scrolls back up to the top of the page once the user lets go of the scroll wheel, if it's over 40 it doesn't.

I realise that this is a really bad way to go about this, so I'm wondering if anyone has a more reliable way to do it. I tried to have a removeEventListener method turn off the event listener once setTimeout has finished its delay, but I couldn't get it to target the window. I think removeEventListener would work if the scroll event listener was assigned to a container div, and not the window, but when I tried that the scroll event listener wouldn't work in the first place.

I wanted to avoid jQuery or any other library if I could, but at this point I'll use anything that gets it to work reliably.

I want a scroll event listener to fire when the user scrolls the page for the first time, but then to stop firing after a certain amount of time and just allow the user to scroll normally.

Here's how I've currently got it working:

var scrollcount = 0

// Scroll event listener

  window.addEventListener("scroll", function() {
    setTimeout(function() {
    scrollcount ++
    if (scrollcount < 40) {
        window.scrollTo(0, 0);
    }
}, 1200);
  });

The scrollcount variable increments along with scrolling, and 40 is about how much it takes for one scroll up on my laptop's trackpad. If the counter is under 40, the page scrolls back up to the top of the page once the user lets go of the scroll wheel, if it's over 40 it doesn't.

I realise that this is a really bad way to go about this, so I'm wondering if anyone has a more reliable way to do it. I tried to have a removeEventListener method turn off the event listener once setTimeout has finished its delay, but I couldn't get it to target the window. I think removeEventListener would work if the scroll event listener was assigned to a container div, and not the window, but when I tried that the scroll event listener wouldn't work in the first place.

I wanted to avoid jQuery or any other library if I could, but at this point I'll use anything that gets it to work reliably.

• javascript

• It very much looks like XY problem. Could you explain what your original problem was? Are you trying to scroll to the top of the page when user tries to scroll the page for the first time? – TeWu Commented Oct 19, 2016 at 16:19
• Yes. I don't want it to trigger immediately, though. The user's first scroll triggers some animation, and once those animations are finished I want the window to jump back up to the top of the page, after which I want the user to be able to scroll freely. My problem is that I can get it to jump to the top of the page, and scrollcount stops it from going back to the top afterwards and lets the user scroll, but this solution is so particular to my screen / trackpad that it won't work for tablet / mobile / other puters. My question is: surely there's a better solution? – Evan Commented Oct 19, 2016 at 18:50

2 Answers 2

You need to give a name to your listener to remove it:

var scrollcount = 0

// Scroll event listener

function scrollListener() {
  setTimeout(function() {
    scrollcount ++
    if (scrollcount < 40) {
      window.scrollTo(0, 0);
      window.removeEventListener("scroll", scrollListener);
    }
  }, 1200);
});
window.addEventListener("scroll", scrollListener);

This will jump to the top of the page, after 2 sec from when user start scrolling:

/* Create a one-time event */
function onetime(node, type, callback) {
  node.addEventListener(type, function(e) {
      e.target.removeEventListener(e.type, arguments.callee);
      return callback(e);
  });
}

onetime(document, 'scroll', function(e) {
  setTimeout(function(){ window.scrollTo(0, 0); }, 2000);
});

see it live here

If you are using jQuery, you can use jQuery's one function, and simplify the code to:

$(document).one('scroll', function(e) {
  setTimeout(function(){ window.scrollTo(0, 0); }, 2000);
});

If you want to jump to the top of the page after some animations are finished instead of waiting predefined amount of time, then you should call window.scrollTo(0, 0); after you are done animating. If you are animating using jQuery's effect functions, then you can pass callback function as last argument, and it will be called once the animation is plete. For example you can do something like this:

$(document).one('scroll', function(e) {
  $('pre').animate(
    {fontSize: "106px"},
    2000,
    function(){ window.scrollTo(0, 0); }
  );
});

see it live here