Skip to content

Instantly share code, notes, and snippets.

@thetutlage
Created December 13, 2016 17:21
Show Gist options
  • Save thetutlage/950ed7c8f94e425c165a475a02ebd594 to your computer and use it in GitHub Desktop.
Save thetutlage/950ed7c8f94e425c165a475a02ebd594 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
setTimeout(scroll_frame, 0)
}
// boostrap the animation process
setTimeout(scroll_frame, 0)
}
// USAGE
// scrollTo(document.querySelect('.messages'), 500)
@JoshuaAmaju
Copy link

Awesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment