Uses the requestAnimationFrame API. TODO: Add easing to the animation.

documentScroller.js

/**
 * @author Jon Chretien
 * @overview User clicks on a navigation link and document scrolls to element with matching DOM id.
 * @copyright 2013
 */

/*jshint asi: true, browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true, sub: true */

(function( window, undefined ) {

  'use strict';

  // test requestAnimationFrame support
  window._cancelAnimFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame;
  window._requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;

  var DocumentScroller = {

    navigationLinks: null,

    /**
     * Initialize application.
     */
    init: function() {
      this.navigationLinks = document.querySelectorAll('a[class^="nav-"]');
      this.setEventHandlers();
    },


    /**
     * Add event handlers to links.
     * http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
     */
    setEventHandlers: function() {
      var self = this;
      [].forEach.call( this.navigationLinks, function(el) {
        el.addEventListener('click', self.scrollToContent.bind(self), false);
       });
    },


    /**
     * Scrolls to specified content. Uses hash from link to find DOM id.
     * http://stackoverflow.com/questions/14405180/window-scrollby-javascript
     * @param {Object} event - The event triggered.
     */
    scrollToContent: function(event) {
      event.preventDefault();

      // use hash of current target to find element with matching DOM id
      var hash = event.currentTarget.hash.substring(1),
          elOffsetTop = document.getElementById(hash).offsetTop;

      // clear interval if the user has reached the top offset of the DOM
      // element or if the user has scrolled to the bottom of the page
      // http://stackoverflow.com/questions/2817042/determining-when-scrolled-to-bottom-of-a-page-with-javascript
      function monitorScrollProgress() {
        window.scrollBy(0, 25);
        if ( window.pageYOffset >= (elOffsetTop - 30) || ( window.innerHeight + (document.body.scrollTop || document.documentElement.scrollTop) ) >= document.body.offsetHeight ) {
          window._cancelAnimFrame(myRequest);
        } else {
          window._requestAnimFrame(monitorScrollProgress);
        }
      }

      var myRequest = window._requestAnimFrame(monitorScrollProgress);

    }

  };

  if ( window._requestAnimFrame ) {
    DocumentScroller.init();
  }

})( window );