How to Create a Cross-Browser \"Scroll to Top\" Animation with Pure JavaScript?

Cross-Browser "Scroll to Top" Animation in Plain JavaScript

Introduction:

Enhancing user accessibility by providing a seamless "scroll to top" animation is essential for modern web development. While JavaScript libraries like jQuery offer convenient solutions, implementing this functionality purely in JavaScript can be beneficial for lightweight and cross-browser compatibility.

Solution:

The provided JavaScript function, scrollTo, enables you to implement a smooth scroll-to-top animation for any page element. It takes three parameters:

• element: The HTML element you want to scroll (usually document.body for the entire page).
• to: The desired scroll position (in pixels).
• duration: The animation duration in milliseconds (set to 600ms for a smooth animation).

Function Breakdown:

• if (duration <= 0) return: Exit the function if the animation duration is less than or equal to zero.
• var difference = to - element.scrollTop: Calculate the difference between the target scroll position and the current position.
• var perTick = difference / duration * 10: Determine the amount to scroll each interval.
• setTimeout(...): Set a timeout to execute the animation loop at regular intervals (10ms).
• element.scrollTop = element.scrollTop perTick: Update the scroll position by the calculated perTick value.
• If the scroll position is not yet equal to the target, the function calls itself recursively with a decreased duration until the target is reached.

Usage:

Incorporate the scrollTo function into your HTML:

<code class="html"><button id="scrollme" type="button">Go to Top</button><p>Attach the click event handler to the button:</p>
<pre class="brush:php;toolbar:false"><code class="javascript">var scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false);

function runScroll() {
  scrollTo(document.body, 0, 600);
}</code>

Conclusion:

This snippet provides a versatile tool for creating a cross-browser scroll-to-top animation using native JavaScript. Its simplicity and flexibility make it suitable for a wide range of web applications.

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