Menu Close

How to Detect Scroll up and Scroll Down event on Page with jQuery

0
(0)

Let’s see how to detect scroll up or scroll down on your page using jQuery. This action is based on the direction of scrolling.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Print PDF using inline iFrame</title>
</head>
<body style="height:1000px">
    <p class="down" style="position: fixed;display: none;">Moving Down</p>
    <p class="up" style="position: fixed;display: none;">Moving Up</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>  
 $(function(){
	 var lastScrollTop = 0, threshold = 5;
	 $(window).scroll(function(){
		 var nowScrollTop = $(this).scrollTop();
		 if(Math.abs(lastScrollTop - nowScrollTop) >= threshold){
		 	if (nowScrollTop > lastScrollTop){
                $('p').hide();
                $('p.down').show();
		 	} else {
                $('p').hide();
                $('p.up').show();
			}
		 lastScrollTop = nowScrollTop;
		 }
	 });
 });
</script>
</html>
 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...