Scrolltop animation without jquery

javascript

scrolling

animation

performance

byAnton Shumikhin·Dec 27, 2024

To implement smooth scrollTop animation, we can leverage plain JavaScript, specifically the requestAnimationFrame function for efficient animations. Observe the following stripped-down example:

const smoothScrollTo = (end, duration) => {
  const start = window.scrollY;
  const change = end - start;
  let currentTime = 0;
  
  const easeInOutQuad = (time, start, change, duration) => {
    time /= duration / 2;
    if (time < 1) return (change / 2) * time * time + start;
    time--;
    return (-change / 2) * (time * (time - 2) - 1) + start;
  };

  const animateScroll = () => {
    currentTime += 20; // time travels at 88mph
    const val = easeInOutQuad(currentTime, start, change, duration);
    window.scrollTo(0, val);
    if (currentTime < duration) {
      requestAnimationFrame(animateScroll); // Let's animate, not procrastinate!
    }
  };
  animateScroll();
};

smoothScrollTo(0, 1000); // Scrolls to the top in 1 sec. No time to make coffee.

This code snippet employs smoothScrollTo, a function that scrolls to a target position (e.g., the top) within a desired duration. The easeInOutQuad function creates an alluring easing effect.

A key point to note is to ensure performance optimization to evade tardy scroll actions. requestAnimationFrame is a friend of modern browsers that delivers cognitive frame rates and optimal CPU load.

Understanding the magic - easing functions

As our smooth operator, the easeInOutQuad function is the Hermione Granger of our easing charm. It belongs to the magical family of easing functions, which create animations that mimic natural acceleration and deceleration.

The ease-in-out effect we implemented generates a smooth scroll, starting slowly, gaining speed, and then abating towards the end. Oh, the mimicry of natural motion!

All browsers are equal, but some browsers are more equal

Cross-browser testing is a must if your scroll function is to work harmoniously across the lands of different browsers. While requestAnimationFrame is widely supported, older browsers may need a polyfill. window.scrollY can turn out to be undefined in the older versions of Internet Explorer. As a convenient alternative, document.documentElement.scrollTop can be used.

Performance & browser fallbacks

Animations can get performance-heavy, more so on low-power devices. Our function uses requestAnimationFrame, which streamlines browser optimization of the animation loop. This gracefully maintains a smooth framerate and performance impact.

For those browsers that don't know of requestAnimationFrame, a fallback plan to setTimeout is advisable.

// Fallback to setTimeout if requestAnimationFrame pulls a vanishing act
window.requestAnimationFrame = window.requestAnimationFrame || function(callback) { 
  return setTimeout(callback, 1000 / 60);
}

Making your scrolling reusable and high maintenance

While crafting your scroll animation, prioritize clean, maintainable, and readable code.

Easing function: Out and about

Extracting the easing function off your smoothScrollTo function can be a move for the better. Especially when you plan to support multiple easing algorithms or reuse it to grace other animations:

const easeInOutQuad = (time, start, change, duration) => { /* ... */ };

Say yes to parameters

Including parameters for start and end positions in your function amps up its flexibility. Now you can scroll to any coordinate within the document, not mainly the top:

const smoothScrollTo = (start, end, duration) => { /* ... */ };

Graceful error handling

Ensure your script can handle errors and out-of-range conditions smoothly. A good example would be cases where the duration isn't a positive number or the target scroll position exceeds the document's dimensions:

if (duration <= 0 || typeof duration !== 'number') {
  console.error('Invalid duration: must be a positive number (No, you can't go back in time)');
}