How Can I Implement a Cross-Browser Scroll-to-Top Animation Using Pure JavaScript?

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:

1. Define the scrollTo Function: Create a function that takes three parameters: element, to, and duration. This function will handle the animation.

   <code class="javascript">function scrollTo(element, to, duration) {</code>

2. 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.

   <code class="javascript">  if (duration <= 0) return;
     var difference = to - element.scrollTop;
     var perTick = difference / duration * 10;

3. 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.

   <code class="javascript">  setTimeout(function() {
    element.scrollTop = element.scrollTop + perTick;
    if (element.scrollTop === to) return;
    scrollTo(element, to, duration - 10);
     }, 10);

4. Usage: To smoothly scroll to the top of a page, call the scrollTo function like this:

   <code class="javascript">scrollTo(document.body, 0, 600);

5. 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.

   <code class="html"><button id="scrollme" type="button">To the top</button></code>

   <code class="javascript">var scrollme = document.querySelector("#scrollme");
   scrollme.addEventListener("click", runScroll, false);</code>

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.

The above is the detailed content of How Can I Implement a Cross-Browser Scroll-to-Top Animation Using Pure JavaScript?. For more information, please follow other related articles on the PHP Chinese website!