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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 postion 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>

chevron_right


Output:
jquery-animate

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.