Skip to content

Instantly share code, notes, and snippets.

@caracal7
Forked from thetutlage/scroll.js
Last active June 15, 2019 09:48
Show Gist options
  • Save caracal7/e4bc1f15b2e6902e01678d6f84b4436c to your computer and use it in GitHub Desktop.
Save caracal7/e4bc1f15b2e6902e01678d6f84b4436c to your computer and use it in GitHub Desktop.
Scroll to the bottom of an element with smooth animation - Pure Javascript
function scrollTo (element, duration) {
if (!element) return;
var target = element.scrollHeight;
target = Math.round(target);
duration = Math.round(duration);
if (duration < 0) return false;
if (duration === 0) {
element.scrollTop = target;
return true;
}
var start_time = Date.now();
var end_time = start_time + duration;
var start_top = element.scrollTop;
var distance = target - start_top;
// based on http://en.wikipedia.org/wiki/Smoothstep
var smooth_step = function (start, end, point) {
if (point <= start) return 0;
if (point >= end) return 1;
var x = (point - start) / (end - start) ;// interpolation
return x * x * (3 - 2 * x);
}
// This is to keep track of where the element's scrollTop is
// supposed to be, based on what we're doing
var previous_top = element.scrollTop;
// This is like a think function from a game loop
var scroll_frame = function () {
if (element.scrollTop !== previous_top) return false;
// set the scrollTop for this frame
var now = Date.now();
var point = smooth_step(start_time, end_time, now);
var frameTop = Math.round(start_top + (distance * point));
element.scrollTop = frameTop;
// check if we're done!
if (now >= end_time) return true;
// If we were supposed to scroll but didn't, then we
// probably hit the limit, so consider it done; not
// interrupted.
if (element.scrollTop === previous_top && element.scrollTop !== frameTop) return true;
previous_top = element.scrollTop;
// schedule next frame for execution
requestAnimationFrame(scroll_frame);
}
// boostrap the animation process
requestAnimationFrame(scroll_frame);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment