/*! 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 dipakai untuk mewakili elemen yang ingin diberi pengaruh animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:
<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>