How to set smooth scrolling to stop at a specific position from the top using jQuery ? Last Updated : 22 Jun, 2021 Comments Improve Suggest changes Like Article Like Report The scrollTop() method in jQuery is used to scroll to a particular portion of the page. Animating this method with the available inbuilt animations can make the scroll smoother. And, subtracting the specified value from it will make the scrolling to stop from the top. Approach: The hash portion of the anchor link is first extracted using the hash property and its position on the page is found out using the offset() method. The scrollTop() method is then called on this hash value to scroll to that location. This method is animated by enclosing it within the animate() method and specifying the duration of the animation to be used in milliseconds. A larger value would make the animation slower to complete than a smaller value. This will smoothly animate all the anchor links on the page when they are clicked. And then we will subtract the specified value to stop the smooth scrolling to stop from the top. Example: HTML <!DOCTYPE html> <html> <head> <title> How to set smooth scrolling to stop at a specific position from the top using jQuery? </title> <!-- JQuery Script --> <script src= "https://code.jquery.com/jquery-3.4.1.min.js"> </script> <!-- Style to make scrollbar appear --> <style> .scroll { height: 1000px; background-color: teal; color: white; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b> How to set smooth scrolling to stop at a specific position from the top using jQuery? </b> <p id="dest"> Click on the button below to scroll to the top of the page. </p> <p class="scroll"> GeeksforGeeks is a computer science portal. This is a large scrollable area. </p> <a href="#dest"> Scroll to top </a> <!-- jQuery for smooth scrolling to a specific position from top --> <script> // Define selector for selecting // anchor links with the hash let anchorSelector = 'a[href^="#"]'; $(anchorSelector).on('click', function (e) { // Prevent scrolling if the // hash value is blank e.preventDefault(); // Get the destination to scroll to // using the hash property let destination = $(this.hash); // Get the position of the destination // using the coordinates returned by // offset() method and subtracting 50px // from it. let scrollPosition = destination.offset().top - 50; // Specify animation duration let animationDuration = 500; // Animate the html/body with // the scrollTop() method $('html, body').animate({ scrollTop: scrollPosition }, animationDuration); }); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to set smooth scrolling to stop at a specific position from the top using jQuery ? aditya_taparia Follow Improve Article Tags : Technical Scripter Web Technologies JQuery Technical Scripter 2020 jQuery-Questions +1 More Similar Reads 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 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 set smooth scroll after clicking the link using JavaScript ? Smooth scroll provides a seamless user experience as it provides an effective way to enhance website navigation. By implementing smooth scroll functionality, one can ensure that users transition fluidly between different sections of your webpage when they click on internal links.There are several me 4 min read Scroll to the top of the page using JavaScript/jQuery Given a webpage and the task is to scroll to the top of the page using jQuery.A scrollable page can be scrolled to the top using 2 approaches: Table of ContentUsing window.scrollTo()Using scrollTop() in jQueryMethod 1: Using window.scrollTo()The scrollTo() method of the window Interface can be used 3 min read How to display scroll update when scrolling down the page using jQuery ? 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 W 2 min read How to set Textarea Scroll Bar to Bottom as a Default using JavaScript/jQuery? Given an HTML document containing <textarea> element and the task is to set the position of scrollbar to bottom of <textarea> with the help of jQuery. Below are the approaches to set the textarea scrollbar to the bottom:Table of ContentUsing jQueryUsing JavaScriptApproach 1: Using jQuery 3 min read How to jump to top of browser page using jQuery? When the website contains lots of data on a single page and while seeing down the website, if the user wants to see the main content i.e, top of the browser page without scrolling, this can be achieved by using jQuery. Example: Jump to the top of the browser page html <html> <head> <s 1 min read How to animate scrollTop using jQuery ? The scrollTop property in JavaScript is used to set or return the vertical scrollbar position of any element. Setting the scrollTop to any value will make the page scroll to that location. The scroll by default takes place immediately and abruptly scrolls to the value. This scrolling can be animated 3 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to prevent Body from scrolling when a modal is opened using jQuery ? In this article, we will learn how we can prevent the body from scrolling when a popup or modal is opened using jQuery. This task can be easily accomplished by setting the value of the overflow property to hidden using the css() method or by adding and removing the class from the body.Table of Conte 12 min read Like