animated-scroll-to.js

(function() {
  'use strict';

  // desiredOffset - page offset to scroll to
  // speed - duration of the scroll per 1000px
  function __ANIMATE_SCROLL_TO(desiredOffset) {
    var userOptions = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];

    if (desiredOffset instanceof HTMLElement) {
      var scrollTop = window.scrollY || document.documentElement.scrollTop;
      desiredOffset = scrollTop + desiredOffset.getBoundingClientRect().top;
    }

    var defaultOptions = {
      speed: 500,
      minDuration: 250,
      maxDuration: 1500,
      cancelOnUserAction: true,
      element: window,
      onComplete: undefined,
    };

    var options = {};

    Object.keys(defaultOptions).forEach(function(key) {
      options[key] = userOptions[key] ? userOptions[key] : defaultOptions[key];
    });

    options.isWindow = options.element === window;

    var initialScrollPosition = null;
    var maxScroll = null;

    if (options.isWindow) {
      // get cross browser scroll position
      initialScrollPosition = window.scrollY || document.documentElement.scrollTop;
      // cross browser document height minus window height
      maxScroll = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
      ) - window.innerHeight;
    } else {
      // DOM element
      initialScrollPosition = options.element.scrollTop;
      maxScroll = options.element.scrollHeight - options.element.clientHeight;
    }

    // If the scroll position is greater than maximum available scroll
    if (desiredOffset > maxScroll) {
      desiredOffset = maxScroll;
    }

    // Calculate diff to scroll
    var diff = desiredOffset - initialScrollPosition;

    // Do nothing if the page is already there
    if (diff === 0) {
      // Execute callback if there is any
      if (options.onComplete && typeof options.onComplete === 'function') {
        options.onComplete()
      }

      return;
    }

    // Calculate duration of the scroll
    var duration = Math.abs(Math.round((diff / 1000) * options.speed));

    // Set minimum and maximum duration
    if (duration < options.minDuration) {
      duration = options.minDuration;
    } else if (duration > options.maxDuration) {
      duration = options.maxDuration;
    }

    var startingTime = Date.now();

    // Request animation frame ID
    var requestID = null;

    // Method handler
    var handleUserEvent = null;

    if (options.cancelOnUserAction) {
      // Set handler to cancel scroll on user action
      handleUserEvent = function() { cancelAnimationFrame(requestID); };
      window.addEventListener('keydown', handleUserEvent);
    } else {
      // Set handler to prevent user actions while scroll is active
      handleUserEvent = function(e) { e.preventDefault(); };
      window.addEventListener('scroll', handleUserEvent);
    }

    window.addEventListener('wheel', handleUserEvent);
    window.addEventListener('touchstart', handleUserEvent);

    var step = function () {
      var timeDiff = Date.now() - startingTime;
      var t = (timeDiff / duration) - 1;
      var easing = t * t * t + 1;
      var scrollPosition = Math.round(initialScrollPosition + (diff * easing));

      if (timeDiff < duration && scrollPosition !== desiredOffset) {
        // If scroll didn't reach desired offset or time is not elapsed
        // Scroll to a new position
        // And request a new step

        if (options.isWindow) {
          options.element.scrollTo(0, scrollPosition);
        } else {
          options.element.scrollTop = scrollPosition;
        }

        requestID = requestAnimationFrame(step);
      } else {
        // If the time elapsed or we reached the desired offset
        // Set scroll to the desired offset (when rounding made it to be off a pixel or two)
        // Clear animation frame to be sure
        if (options.isWindow) {
          options.element.scrollTo(0, desiredOffset);
        } else {
          options.element.scrollTop = desiredOffset;
        }
        cancelAnimationFrame(requestID);

        // Remove listeners
        window.removeEventListener('wheel', handleUserEvent);
        window.removeEventListener('touchstart', handleUserEvent);

        if (options.cancelOnUserAction) {
          window.removeEventListener('keydown', handleUserEvent);
        } else {
          window.removeEventListener('scroll', handleUserEvent);
        }

        // Animation is complete, execute callback if there is any
        if (options.onComplete && typeof options.onComplete === 'function') {
          options.onComplete()
        }
      }
    };

    // Start animating scroll
    requestID = requestAnimationFrame(step);
  }

  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      module.exports = __ANIMATE_SCROLL_TO;
      exports = module.exports;
    }
    exports.default = __ANIMATE_SCROLL_TO;
  } else if (window) {
    window.animateScrollTo = __ANIMATE_SCROLL_TO;
  }
}).call(this);