Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

There are two methods to smoothly scroll a web page after clicking the anchor link which are discussed below:

Method 1: Using scrollIntoView() with the ‘smooth’ behavior: The scrollIntoView() method is used to scroll the view of the user to the element that it is called upon. It contains several options that may be defined to modify the scroll behavior. One of these is ‘behavior’ property. The default value of this property makes the scroll instantly jump to its destination, instead of smoothly scrolling. Setting this value to ‘smooth’ changes this behavior and makes the page scroll smoothly.

The hash portion of the anchor link is first extracted using the hash property and it is selected with the querySelector() method. The scrollIntoView() method is then called on this selected element to smoothly scroll the page to this location.

Example: 

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: 

scroll-behavior

Method 2: Using jQuery scrollTop() method: 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.

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.

Example:  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to set smooth scrolling after
        clicking an anchor link using
        JavaScript?
    </title>
     
    <script src=
    </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;
     
            // Animate the html/body with
            // the scrollTop() method
            $('html, body').animate({
                scrollTop: scrollPosition
            }, animationDuration);
        });
    </script>
</body>
 
</html>


Output: 

jquery-animate

 



Last Updated : 14 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads