How to display scroll update when scrolling down the page using jQuery ? Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report In this article, we will learn to show scroll updates when scrolling down on a webpage. The scroll() event handler can be used to detect any scrolling in the page, but we only need to detect the scrolling down. The scroll down event can be handled using the scroll() and scrollTop() events.HTML DOM Window Scroll() Method: The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the CSS overflow property set to scroll.Syntax:$( "#id" ).scroll(function() {});scrollTop(): Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element. This method does not accept any arguments.Syntax:$( "#id" ).scrollTop( );Approach:We will set the initial vertical Position to 0If any scrolling is done, it will be detected by the scroll() event and the current vertical position is fetched using scrollTop() event.If the initial vertical position is less than ( < ) current vertical position then the text " Scroll down detected " is displayed.The text will be faded out using the following code.$("#updater").fadeOut(1000);If the initial vertical position is greater than ( > ) current vertical position then the output text display property will be set to "none".$("#updater").css('display','None');Example: The following code demonstrates the above approach. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> var x = 0; $(document).ready(function () { var prevPosition = 0; var currPosition; $('p').css('margin-bottom', '50px'); $("div").scroll(function () { currPosition = $("div").scrollTop(); if (prevPosition < currPosition) { $("#updater").css('display', 'block'); $("#updater").fadeOut(1000); prevPosition = currPosition; } else if (prevPosition >= currPosition) { $("#updater").css('display', 'None'); prevPosition = currPosition; } }); }); </script> </head> <body> <h1> update the scroll down event </h1> <div style="height:300px; width:100%; overflow:scroll;"> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> <p>some data</p> </div> <h1 id="updater" style="display:none;"> scroll down detected </h1> </body> </html> Output: Comment More infoAdvertise with us Next Article How to display scroll update when scrolling down the page using jQuery ? P pulamolusaimohan Follow Improve Article Tags : Web Technologies JQuery jQuery-Methods HTML-Questions jQuery-Questions +1 More Similar Reads How to scroll the page up or down using anchor element in jQuery ? The problem is to include a slide effect whenever we click a local anchor and we want to scroll up or down the page accordingly. Earlier we can do it natively by using CSS property. Syntax: a { scroll-behavior: smooth; } Now with the help of jQuery, we can do it by using the following two methods: j 2 min read How to scroll automatically to the Bottom of the Page using jQuery? We are given an webpage and the task is to automatically scroll to the bottom of the page using jQuery.Below are the approaches to achieve this:Table of ContentUsing the scrollTop with height() methodUsing scrollTop with animate() methodUsing the scrollTop with height() methodIn this approach, we wi 3 min read How to update mouse location when scrolling with jQuery ? jQuery provides us with an extensive set of MouseEvents that are used to provide information regarding the movements of the mouse pointer. For example, the jQuery mousedown event is emitted when left click is performed over a selected element. To determine the coordinates of the mouse pointer over a 5 min read How to disable scrollbar without hiding using jQuery ? A vertical or horizontal bar that is located at the corners of the page helps us to scroll the pages or containers upwards, downwards or sideways. So, the process is to disable the scroll bar but the scroll bar should be visible. In this article, we will disable the scroll bar by using .on() functio 2 min read How to scroll to specific element using jQuery ? Many times, in our website we want to scroll automatically to a section of the webpage when we click on a button or a heading in a navbar or a list. So, to achieve this automatic scrolling to the required element, we need to take the help of jQuery. Using jQuery, we can achieve this in a very simple 3 min read Like