Do something when scroll up and something else when scroll down in jquery

Question

I want to add a small down arrow on my website when users scroll down and an arrow pointing up when they scroll up.

The only thing I managed to do is

$(document).ready(function(){ $(window).scroll(function () { $("#bottomArrow").show(); setTimeout(function(){ $("#bottomArrow").fadeOut() }, 2000); }); }); 

which does not recognize up and down, just a "scroll".

How can I do this using jQuery?

Thanks:)

Answer 1

You need to check in which direction $(document).scrollTop() has changed. You can do something like this:

 $(function() { var prevScroll = $(document).scrollTop(); $(window).scroll(function() { var newScroll = $(document).scrollTop(); if(newScroll < prevScroll) { // Scrolled up } else { // Scrolled down } prevScroll = newScroll; }); }); 

Test site here:

http://jsbin.com/arazu3/