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.

   function scrollTo(element, to, duration) {

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.

     if (duration 

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.

     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:

   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.

   To the top

   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.