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"> neveropen </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"> neveropen 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= </script> <style> .scroll { height: 1000px; background-color: lightgreen; } </style></head><body> <h1 style="color: green"> neveropen </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"> neveropen 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:
