How to set smooth scrolling to stop at a specific position from the top using jQuery ?
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. And, subtracting the specified value from it will make the scrolling to stop from the top.
Approach: 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. And then we will subtract the specified value to stop the smooth scrolling to stop from the top.
Example:
HTML
<!DOCTYPE html><html><head> <title> How to set smooth scrolling to stop at a specific position from the top using jQuery? </title> <!-- JQuery Script --> <script src= </script> <!-- Style to make scrollbar appear --> <style> .scroll { height: 1000px; background-color: teal; color: white; } </style></head><body> <h1 style="color: green"> GeeksforGeeks </h1> <b> How to set smooth scrolling to stop at a specific position from the top using jQuery? </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> <!-- jQuery for smooth scrolling to a specific position from top --> <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 and subtracting 50px // from it. let scrollPosition = destination.offset().top - 50; // Specify animation duration let animationDuration = 500; // Animate the html/body with // the scrollTop() method $('html, body').animate({ scrollTop: scrollPosition }, animationDuration); }); </script></body></html> |
Output:
Please Login to comment...