(function (root, factory) { if ( typeof define === 'function' && define.amd ) { define('smoothscroll', factory(root)); } else if ( typeof exports === 'object' ) { module.smoothscroll = factory(root); } else { root.smoothscroll = factory(root); } })(this, function (root) { 'use strict'; // // variables // var exports = {}; // object for public apis var supports = !!document.queryselector && !!root.addeventlistener; // feature test var settings; // default settings var defaults = { speed: 500, easing: 'easeinoutcubic', offset: 0, updateurl: false, callbackbefore: function () {}, callbackafter: function () {} }; // // methods // /** * a simple foreach() implementation for arrays, objects and nodelists * @private * @param {array|object|nodelist} collection collection of items to iterate * @param {function} callback callback function for each iteration * @param {array|object|nodelist} scope object/nodelist/array that foreach is iterating over (aka `this`) */ var foreach = function (collection, callback, scope) { if (object.prototype.tostring.call(collection) === '[object object]') { for (var prop in collection) { if (object.prototype.hasownproperty.call(collection, prop)) { callback.call(scope, collection[prop], prop, collection); } } } else { for (var i = 0, len = collection.length; i < len; i++) { callback.call(scope, collection[i], i, collection); } } }; /** * merge defaults with user options * @private * @param {object} defaults default settings * @param {object} options user options * @returns {object} merged values of defaults and options */ var extend = function ( defaults, options ) { var extended = {}; foreach(defaults, function (value, prop) { extended[prop] = defaults[prop]; }); foreach(options, function (value, prop) { extended[prop] = options[prop]; }); return extended; }; /** * calculate the easing pattern * @private * @param {string} type easing pattern * @param {number} time time animation should take to complete * @returns {number} */ var easingpattern = function ( type, time ) { var pattern; if ( type === 'easeinquad' ) pattern = time * time; // accelerating from zero velocity if ( type === 'easeoutquad' ) pattern = time * (2 - time); // decelerating to zero velocity if ( type === 'easeinoutquad' ) pattern = time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time; // acceleration until halfway, then deceleration if ( type === 'easeincubic' ) pattern = time * time * time; // accelerating from zero velocity if ( type === 'easeoutcubic' ) pattern = (--time) * time * time + 1; // decelerating to zero velocity if ( type === 'easeinoutcubic' ) pattern = time < 0.5 ? 4 * time * time * time : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1; // acceleration until halfway, then deceleration if ( type === 'easeinquart' ) pattern = time * time * time * time; // accelerating from zero velocity if ( type === 'easeoutquart' ) pattern = 1 - (--time) * time * time * time; // decelerating to zero velocity if ( type === 'easeinoutquart' ) pattern = time < 0.5 ? 8 * time * time * time * time : 1 - 8 * (--time) * time * time * time; // acceleration until halfway, then deceleration if ( type === 'easeinquint' ) pattern = time * time * time * time * time; // accelerating from zero velocity if ( type === 'easeoutquint' ) pattern = 1 + (--time) * time * time * time * time; // decelerating to zero velocity if ( type === 'easeinoutquint' ) pattern = time < 0.5 ? 16 * time * time * time * time * time : 1 + 16 * (--time) * time * time * time * time; // acceleration until halfway, then deceleration return pattern || time; // no easing, no acceleration }; /** * calculate how far to scroll * @private * @param {element} anchor the anchor element to scroll to * @param {number} headerheight height of a fixed header, if any * @param {number} offset number of pixels by which to offset scroll * @returns {number} */ var getendlocation = function ( anchor, headerheight, offset ) { var location = 0; if (anchor.offsetparent) { do { location += anchor.offsettop; anchor = anchor.offsetparent; } while (anchor); } location = location - headerheight - offset; return location >= 0 ? location : 0; }; /** * determine the document's height * @private * @returns {number} */ var getdocumentheight = function () { return math.max( document.body.scrollheight, document.documentelement.scrollheight, document.body.offsetheight, document.documentelement.offsetheight, document.body.clientheight, document.documentelement.clientheight ); }; /** * remove whitespace from a string * @private * @param {string} string * @returns {string} */ var trim = function ( string ) { return string.replace(/^\s+|\s+$/g, ''); }; /** * convert data-options attribute into an object of key/value pairs * @private * @param {string} options link-specific options as a data attribute string * @returns {object} */ var getdataoptions = function ( options ) { var settings = {}; // create a key/value pair for each setting if ( options ) { options = options.split(';'); options.foreach( function(option) { option = trim(option); if ( option !== '' ) { option = option.split(':'); settings[option[0]] = trim(option[1]); } }); } return settings; }; /** * update the url * @private * @param {element} anchor the element to scroll to * @param {boolean} url whether or not to update the url history */ var updateurl = function ( anchor, url ) { if ( history.pushstate && (url || url === 'true') ) { history.pushstate( { pos: anchor.id }, '', anchor ); } }; /** * start/stop the scrolling animation * @public * @param {element} toggle the element that toggled the scroll event * @param {element} anchor the element to scroll to * @param {object} settings * @param {event} event */ exports.animatescroll = function ( toggle, anchor, options, event ) { // options and overrides var settings = extend( settings || defaults, options || {} ); // merge user options with defaults var overrides = getdataoptions( toggle ? toggle.getattribute('data-options') : null ); settings = extend( settings, overrides ); // selectors and variables var fixedheader = document.queryselector('[data-scroll-header]'); // get the fixed header var headerheight = fixedheader === null ? 0 : (fixedheader.offsetheight + fixedheader.offsettop); // get the height of a fixed header if one exists var startlocation = root.pageyoffset; // current location on the page var endlocation = getendlocation( document.queryselector(anchor), headerheight, parseint(settings.offset, 10) ); // scroll to location var animationinterval; // interval timer var distance = endlocation - startlocation; // distance to travel var documentheight = getdocumentheight(); var timelapsed = 0; var percentage, position; // prevent default click event if ( toggle && toggle.tagname.tolowercase() === 'a' && event ) { event.preventdefault(); } // update url updateurl(anchor, settings.updateurl); /** * stop the scroll animation when it reaches its target (or the bottom/top of page) * @private * @param {number} position current position on the page * @param {number} endlocation scroll to location * @param {number} animationinterval how much to scroll on this loop */ var stopanimatescroll = function (position, endlocation, animationinterval) { var currentlocation = root.pageyoffset; if ( position == endlocation || currentlocation == endlocation || ( (root.innerheight + currentlocation) >= documentheight ) ) { clearinterval(animationinterval); settings.callbackafter( toggle, anchor ); // run callbacks after animation complete } }; /** * loop scrolling animation * @private */ var loopanimatescroll = function () { timelapsed += 16; percentage = ( timelapsed / parseint(settings.speed, 10) ); percentage = ( percentage > 1 ) ? 1 : percentage; position = startlocation + ( distance * easingpattern(settings.easing, percentage) ); root.scrollto( 0, math.floor(position) ); stopanimatescroll(position, endlocation, animationinterval); }; /** * set interval timer * @private */ var startanimatescroll = function () { settings.callbackbefore( toggle, anchor ); // run callbacks before animating scroll animationinterval = setinterval(loopanimatescroll, 16); }; /** * reset position to fix weird ios bug * @link https://github.com/cferdinandi/smooth-scroll/issues/45 */ if ( root.pageyoffset === 0 ) { root.scrollto( 0, 0 ); } // start scrolling animation startanimatescroll(); }; /** * initialize smooth scroll * @public * @param {object} options user settings */ exports.init = function ( options ) { // feature test if ( !supports ) return; // selectors and variables settings = extend( defaults, options || {} ); // merge user options with defaults var toggles = document.queryselectorall('[data-scroll]'); // get smooth scroll toggles // when a toggle is clicked, run the click handler foreach(toggles, function (toggle) { toggle.addeventlistener('click', exports.animatescroll.bind( null, toggle, toggle.hash, settings ), false); }); }; // // public apis // return exports; });