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

14 Sep, 2021
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: 
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=        "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;                 // Animate the html/body with            // the scrollTop() method            $('html, body').animate({                scrollTop: scrollPosition            }, animationDuration);        });    </script></body> </html>
Output: 
 
sweetyty
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to append HTML code to a div using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?