drifterz28
9/24/2013 - 1:59 PM

Scroll to top.

Scroll to top.

module.exports = function() {
	'use strict';
	var extend = function(source, properties) {
		var property;
		for(property in properties) {
			if(properties.hasOwnProperty(property)) {
				source[property] = properties[property];
			}
		}
		return source;
	};
	var options;
	var topTopElm;
	var defaults = {
		scrollSpeed: 500,
		arrowIn: 500 // px from window to that the fase in on the arrow will happen
	};
	if (arguments[0] && typeof arguments[0] === 'object') {
		options = extend(defaults, arguments[0]);
	} else {
		options = defaults;
	}
	function addEvent(evnt, elem, callback) {
		if (elem.addEventListener) {
			elem.addEventListener(evnt, callback, false);
		} else if (elem.attachEvent) { // IE DOM
			elem.attachEvent('on' + evnt, callback);
		} else { // No much to do
			elem[evnt] = callback;
		}
	}
	function scrollTo(element, to, duration) {
		var start = window.pageYOffset || element.scrollTop,
			change = to - start,
			currentTime = 0,
			increment = 20;

		var animateScroll = function() {
			currentTime += increment;
			var val = Math.easeInOutQuad(currentTime, start, change, duration);
			element.scrollTop = document.documentElement.scrollTop = val;
			if(currentTime < duration) {
				setTimeout(animateScroll, increment);
			}
		};
		animateScroll();
	}
	//t = current time
	//b = start value
	//c = change in value
	//d = duration
	Math.easeInOutQuad = function(t, b, c, d) {
		t /= d / 2;
		if (t < 1) {
			return c / 2 * t * t + b;
		}
		t--;
		return -c / 2 * ( t * (t - 2) - 1) + b;
	};

	var supportPageOffset = window.pageXOffset !== undefined;
	var isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');

	document.body.insertAdjacentHTML('beforeend', '<div id="to-top"></div>');
	topTopElm = document.getElementById('to-top');

	addEvent('click', topTopElm, function() {
		scrollTo(document.body, 0, options.scrollSpeed);
	});

	addEvent('scroll', window, function() {
		var scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
		if(scrollY >= options.arrowIn) {
			topTopElm.setAttribute('data-state', 'show');
		} else {
			topTopElm.setAttribute('data-state', 'hide');
		}
	});
};
#to-top {
	background: url(data:image/gif;base64,R0lGODlhMAAhALMAADMzM7Lr/zMzbP/SjGwzM//S0tLr///rsjMzjIwzM///0tL/////6//r0uvr/////yH5BAEHAA8ALAAAAAAwACEAAAS68MlJq5XN3M27P4QQeGR5gQAgmiyJpurYztULx3Ru33jO7rye70MIBldDDtCYQiySpyLT6IRSllNY1YrNap/Jrvc7FI/JNPMZ/ZOux9uS+n2Ld+b0Oljpzq/tNX1wCwoJdIASeGiFh3uJgl52jG9xik2OEpN/T5YAiJmGlE8Doh2aXkgPpIMkp0ypEqtTnxeuPLATskG0G7YpuBS6bCy2wBXCvB6nxhayya2hzBekzyWF0hsFmEMMDhwRADs=) no-repeat center center #fff;
	bottom: 10px;
	cursor: pointer;
	height: 40px;
	opacity: 0;
	position: fixed;
	right: 10px;
	text-indent: -9999px;
	transition: opacity .5s ease;
	width: 50px;
	&[data-state=show] {
		opacity: 1;
	}
	&[data-state=hide] {
		opacity: 0;
	}
}