Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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.



<!DOCTYPE html>
        How to set smooth scrolling to stop at
        a specific position from the top using
    <!-- JQuery Script -->
    <script src=
    <!-- Style to make scrollbar appear -->
        .scroll {
            height: 1000px;
            background-color: teal;
            color: white;
    <h1 style="color: green">
        How to set smooth scrolling to stop at
        a specific position from the top using
    <p id="dest">
        Click on the button below to
        scroll to the top of the page.
    <p class="scroll">
        GeeksforGeeks is a computer science
        portal. This is a large scrollable
    <a href="#dest">
        Scroll to top
    <!-- jQuery for smooth scrolling to a
        specific position from top -->
        // 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
            // 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);


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 22 Jun, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials