/*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */
function scrollTo(element, to, duration) {
// http://robertpenner.com/easing/
// 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 start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20,
animateScroll = function() {
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if (currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}Penggunaan
element digunakan untuk mewakili elemen yang ingin diberi efek animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:
<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>
