pinafore/routes/_utils/smoothScrollToTop.js
2018-04-10 23:15:22 -07:00

32 lines
789 B
JavaScript

// via https://github.com/tootsuite/mastodon/blob/f59ed3a4fafab776b4eeb92f805dfe1fecc17ee3/app/javascript/mastodon/scroll.js
const easingOutQuint = (x, t, b, c, d) =>
c * ((t = t / d - 1) * t * t * t * t + 1) + b
const scroll = (node, key, target) => {
const startTime = Date.now()
const offset = node[key]
const gap = target - offset
const duration = 1000
let interrupt = false
const step = () => {
const elapsed = Date.now() - startTime
const percentage = elapsed / duration
if (percentage > 1 || interrupt) {
return
}
node[key] = easingOutQuint(0, elapsed, offset, gap, duration)
requestAnimationFrame(step)
}
step()
return () => {
interrupt = true
}
}
export const smoothScrollToTop = node => scroll(node, 'scrollTop', 0)