How to set smooth scrolling to stop at a specific position from the top using jQuery ? - GeeksforGeeks

22 Jun, 2021
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: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
anikakapoor
CSS-Misc
HTML-Misc
jQuery-Misc
Technical Scripter 2020
CSS
HTML
JQuery
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)