Cross-Browser JavaScript Scroll to Top Animation (Without jQuery)
Many web developers rely on jQuery for seamless page scrolling functionality. However, for those who prefer to avoid external libraries, there's a straightforward solution to scroll to the top of a page using pure JavaScript.
To achieve a cross-browser scroll to top animation, follow these steps:
Define the scrollTo Function: Create a function that takes three parameters: element, to, and duration. This function will handle the animation.
function scrollTo(element, to, duration) {
Calculate the Difference and Per-Tick Increment: Inside the function, calculate the difference between the current scroll position and the desired position (to) and divide it by the duration to determine the per-tick increment.
if (duration
Set the Animation Loop: Use setTimeout to set an animation loop that runs at a frequency of 10 milliseconds. Within the loop, increment the scroll position by the per-tick increment, checking if the desired position has been reached.
setTimeout(function() {
element.scrollTop = element.scrollTop perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
Usage: To smoothly scroll to the top of a page, call the scrollTo function like this:
scrollTo(document.body, 0, 600);
Add a Click Event Listener: If you have a link or button that should trigger the scroll animation, add a click event listener to call the function when clicked.
var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click", runScroll, false);
This pure JavaScript code provides a simple yet effective way to achieve cross-browser scroll to top animations, allowing you to enhance user navigation without the need for external libraries like jQuery.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3