How to set smooth scroll after clicking the link using JavaScript ?

Last Updated : 04 Jul, 2024

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 methods to implement smooth scroll after clicking the link using JavaScript which are as follows:

Table of Content

Using scrollIntoView() with the 'smooth' behaviour
Using jQuery scrollTop() method

Using scrollIntoView() with the 'smooth' behaviour

The scrollIntoView() method scrolls the user's view to the element it is called on. It includes several options to modify the scroll behavior, one of which is the behavior property. By default, this property makes the scroll jump instantly to its destination. Setting the behavior value to smooth changes this to a smooth scrolling effect.

It first extract the hash portion of the anchor link using the hash property, then select the corresponding element with the querySelector() method. Finally, call the scrollIntoView() method on the selected element with behavior set to smooth to smoothly scroll the page to this location.

Example: To demonstrate smooth scroll after clicking the link using the scrollIntoView() method in JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    </title>

    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    </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>

    <script>
        // Define selector for selecting
        // anchor links with the hash
        let anchorSelector = 'a[href^="#"]';

        // Collect all such anchor links
        let anchorList =
            document.querySelectorAll(anchorSelector);

        // Iterate through each of the links
        anchorList.forEach(link => {
            link.onclick = function (e) {

                // Prevent scrolling if the
                // hash value is blank
                e.preventDefault();

                // Get the destination to scroll to
                // using the hash property
                let destination =
                    document.querySelector(this.hash);

                // Scroll to the destination using
                // scrollIntoView method
                destination.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    </script>
</body>

</html>

Output:

Using jQuery scrollTop() method

The scrollTop() method in jQuery is used to scroll to a specific section of the page. By animating this method with built-in animations, you can achieve a smoother scrolling effect. First, the hash portion of the anchor link is extracted using the hash property, and its position on the page is determined using the offset() method.

The scrollTop() method is then called with this hash value to scroll to the desired location. To animate the scroll, wrap the scrollTop() method in the animate() method and specify the duration of the animation in milliseconds.

A larger value will make the animation slower, while a smaller value will speed it up. This approach ensures that all anchor links on the page will smoothly animate when clicked.

Example: To demonstrate smooth scroll using JQuery scrollTop() method.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    </title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js">
    </script>

    <style>
        .scroll {
            height: 1000px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    </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>

    <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
                let scrollPosition
                    = destination.offset().top;

                // Specify animation duration
                let animationDuration = 500;

                $('html, body').animate({
                    scrollTop: scrollPosition
                }, animationDuration);
            });
    </script>
</body>

</html>