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;
}
}