animateScrollToElement.js

function animateScrollToEl(targetEl, duration, easing) {
  var easings = {
    easeInOutExpo: function (t, b, c, d) {
      t /= d/2;
      if (t < 1) return c/2 * Math.pow( 2, 10 * (t - 1) ) + b;
      t--;
      return c/2 * ( -Math.pow( 2, -10 * t) + 2 ) + b;
    }
  };

  var pageScrollYOffset= function() {
    return Math.max(
      window.pageYOffset,
      document.documentElement.scrollTop,
      document.body.scrollTop);
  };

  var requestAnimFrame = window.requestAnimationFrame    ||
                      window.webkitRequestAnimationFrame ||
                      window.mozRequestAnimationFrame    ||
                      window.oRequestAnimationFrame      ||
                      window.msRequestAnimationFrame     ||
                      function(callback) {
                        setTimeout(callback, 1000 / 60);
                      };

  duration = duration || 300;
  easing = easing || 'easeInOutExpo';

  var initialScrollTop = pageScrollYOffset();
  var targetElOffsetTop = initialScrollTop + targetEl.getBoundingClientRect().top;
  var offsetDiff = targetElOffsetTop - initialScrollTop;
  var timeElapsed = 0;
  var startTime = Date.now();

  var animate = function() {
    timeElapsed = Date.now() - startTime;
    var currentScrollTop = easings[easing](timeElapsed, initialScrollTop, offsetDiff, duration);

    if (timeElapsed <= duration) {
      window.scrollTo(0, currentScrollTop);
      requestAnimFrame(animate);
    }
  };

  requestAnimFrame(animate);
}

if (exports) {
  module.exports = animateScrollToEl;
} else {
  window.animateScrollToEl = animateScrollToEl;
}