Menu Close

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

codeamend

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>
 
Posted in jQuery

You can also read...