Skip to content

Instantly share code, notes, and snippets.

@zGrav
Created November 1, 2017 13:41
Show Gist options
  • Save zGrav/3ddd714f7d846fdd83ab8daea37eded0 to your computer and use it in GitHub Desktop.
Save zGrav/3ddd714f7d846fdd83ab8daea37eded0 to your computer and use it in GitHub Desktop.
function getYfromElem(query) {
return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top;
}
function smoothAsButter(elem, dur) {
var startY = window.pageYOffset;
var elemY = getYfromElem(elem);
var resultY = document.body.scrollHeight - elemY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elemY;
var diff = resultY - startY;
var easing = function(t) {
return t < .5 ? 4 * t * t * t : (t-1) * (2 * t - 2) * (2 * t - 2) + 1;
}
var start;
if (!diff) {
return;
}
window.requestAnimationFrame(function step(ts) {
if (!start) {
start = ts;
}
var time = ts - start;
var percentage = Math.min(time / dur, 1);
percentage = easing(percentage);
window.scrollTo(0, startY + diff * percentage);
if (time < dur) {
window.requestAnimationFrame(step);
}
});
}
// Usage
// smoothAsButter('#targetidhere', duration in ms here)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment