WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

Detect Scroll up and Down event with jQuery

In this tutorial, we will show you how to detect whether you scroll up or down using jQuery which will allow you to perform an action based on the direction of scrolling.

Here is how you can achieve this with few very lines of jQuery:-


 $(function(){
	 var lastScrollTop = 0, delta = 5;
	 $(window).scroll(function(){
		 var nowScrollTop = $(this).scrollTop();
		 if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
		 	if (nowScrollTop > lastScrollTop){
		 		// ACTION ON
		 		// SCROLLING DOWN 
		 	} else {
		 		// ACTION ON
		 		// SCROLLING UP 
			}
		 lastScrollTop = nowScrollTop;
		 }
	 });
 });

The code above is based on three variable lastScrollTop, nowScrollTop and delta.

  • lastScrollTop: This variable stores the last Y-position of website window, and by the last position we mean the number of pixels hidden from view above scrollable area. The initial value of this variable is set to 0 as the scroll bar is at the very top.
  • nowScrollTop: This variable stores the number of pixels that are hidden above the scrollable area right now as you are scrolling.
  • delta: delta is like a threshold, it is a variation by which we need scroll detection to occur. for example you might not like the scroll detection function to run when a user scrolls accidentally like around 4px. So we set delta variable to 5px which will prevent accidental or very small scrolling that usually happens on touch screens.

Now we know what the variables are, here is the code explained line by line:-

  • $(function(){…}) will run the code once document is ready.
  • var lastScrollTop = 0, delta = 5; sets the value of two variables.
  • $(window).scroll(function(){…}) runs code enclosed inside it when user scrolls window.
  • var nowScrollTop = $(this).scrollTop(); sets value of third variable, which is equal to the value of scrolling that occurred.
  • if(Math.abs(lastScrollTop – nowScrollTop) >= delta){…} runs the code inside it only if absolute difference between lastScrollTop and nowScrollTop is less than delta (i.e. 5px). We are taking positive value because the distance between to scrolling values is always positive (its scaler).
  • if (nowScrollTop > lastScrollTop){…} if current scrolling value is greater than last scroll value then downward scrolling is occurred and will run the code inside this statement.
  • else upward scrolling is occurred.
  • Finally we set the lastScrollTop = nowScrollTop; because now the last scroll value become the previous nowSrollTop value.

I hope this helps!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

5 thoughts on “Detect Scroll up and Down event with jQuery

  1. This is really nice
    I think you can also try this, it’s shorter and easier to read…
    $(window).scroll(function (){
    var nowScroll= $(this).scrollTop(), delta=5;
    If (Math.abs(nowScroll) > delta) {
    //scroll down action
    } else {
    //scroll up action
    }
    })

  2. var scrollUpStick = function(){
    this.lastScrollTop=0;
    this.delta=5;
    this.onScroll=function(onscrollUp,onscrollDown){
    obj=this;
    $(window).scroll(function(){
    var nowScrollTop=$(this).scrollTop();
    if(Math.abs(obj.lastScrollTop-nowScrollTop)>=obj.delta){
    if(obj.lastScrollTop>nowScrollTop){
    //scroll up action
    onscrollUp();
    }else{
    //scroll down action
    onscrollDown();
    }
    obj.lastScrollTop=nowScrollTop;
    }
    });
    }
    }
    var test=new scrollUpStick()
    test.onScroll(function(){
    alert(‘Scroll Up’);
    },function(){
    alert(‘Scroll Down’);
    })

  3. This is awesome. What I’m trying to do is make a div relative on any scroll up or down, but fixed position on page load.

    I tried this
    jQuery(function(){
    var lastScrollTop = 0, delta = 5;
    jQuery(window).scroll(function(){
    var nowScrollTop = jQuery(this).scrollTop();
    if(Math.abs(lastScrollTop – nowScrollTop) >= delta){
    if (nowScrollTop > lastScrollTop){
    jQuery(‘.ez-bottom-row’).removeClass(‘relative’);
    } else {
    jQuery(‘.ez-bottom-row’).removeClass(‘relative’);
    }
    lastScrollTop = nowScrollTop;
    }
    });
    });

Join the discussion