How to Create a Browser-Agnostic Scroll to Top Animation with Pure JavaScript?

Browser-Agnostic Scroll to Top Animation

When faced with the task of creating a simple "scroll to top" animation for a link, it's tempting to reach for a JavaScript library like jQuery or MooTools. However, it is possible to achieve this effect with pure JavaScript, ensuring cross-browser compatibility.

The provided code implements a scroll animation that gracefully slides the document back to the top over a specified duration. It is a standalone function that can be applied to any element with a scroll bar, providing a better user experience by allowing them to quickly return to the top of the page.

1. Function Signature:

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

• element: The element to be scrolled, typically the html or body element.
• to: The target scroll position in pixels.
• duration: The animation duration in milliseconds.

2. Animation Logic:

• If duration is not positive, the function returns immediately.
• The difference between the target and current scroll position is calculated.
• A perTick value is computed to determine the incremental scroll amount per animation frame.
• Using setTimeout, the scroll position is gradually adjusted at 10 milliseconds intervals until the target is reached.

3. Example Usage:

In the provided HTML snippet, a button with the ID "scrollme" is used as the trigger for the animation:

<code class="javascript">function runScroll() {
  scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)</code>

• When clicked, the runScroll function invokes the scrollTo animation, scrolling the page to the top over 600 milliseconds.

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