Performant, 60FPS smooth scrolling in Vanilla JavaScript using requestAnimationFrame

smooth-scrolling.js

/**
 * @param {number} yPos Pixels from the top of the screen to scroll to
 * @param {number} duration Time of animation in milliseconds
 */
const scrollTo = (yPos, duration = 600) => {
  const startY = window.scrollY;
  const difference = yPos - startY;
  const startTime = performance.now();

  const step = () => {
    const progress = (performance.now() - startTime) / duration;
    const amount = easeOutCubic(progress);
    window.scrollTo({ top: startY + amount * difference });
    if (progress < 0.99) {
      window.requestAnimationFrame(step);
    }
  };

  step();
}

// Easing function from https://gist.github.com/gre/1650294
const easeOutCubic = t => --t * t * t + 1;