smoothScroll.js

/**
 * http://easings.net/#easeOutCubic
 */
function easeOutCubic(t) {
  const _t = t - 1;

  return _t * _t * _t + 1;
}

/**
 * @param {Element} context
 * @param {number} end
 */
function smoothScroll(context = window, end = 0) {
  const duration = 500;
  const clock = Date.now();
  const start = context === window ? context.pageYOffset : context.scrollTop;

  function step() {
    const elapsed = Date.now() - clock;
    const position = elapsed < duration ? start + (end - start) * easeOutCubic(elapsed / duration) : end;

    if (context === window) {
      window.scroll(0, position);
    } else {
      context.scrollTop = position;
    }

    if (elapsed < duration) {
      requestAnimationFrame(step);
    }
  }

  step();
}