Created
November 6, 2018 18:57
-
-
Save FranciscoG/ffcad641988c6d9397b2f47641fca89d to your computer and use it in GitHub Desktop.
Vanilla JS scroll window to an element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Source: https://pawelgrzybek.com/page-scroll-in-vanilla-javascript/ | |
*/ | |
function scrollIt(destination, duration = 200, easing = 'linear', callback) { | |
const easings = { | |
linear(t) { | |
return t; | |
}, | |
easeInQuad(t) { | |
return t * t; | |
}, | |
easeOutQuad(t) { | |
return t * (2 - t); | |
}, | |
easeInOutQuad(t) { | |
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; | |
}, | |
easeInCubic(t) { | |
return t * t * t; | |
}, | |
easeOutCubic(t) { | |
return (--t) * t * t + 1; | |
}, | |
easeInOutCubic(t) { | |
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1; | |
}, | |
easeInQuart(t) { | |
return t * t * t * t; | |
}, | |
easeOutQuart(t) { | |
return 1 - (--t) * t * t * t; | |
}, | |
easeInOutQuart(t) { | |
return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; | |
}, | |
easeInQuint(t) { | |
return t * t * t * t * t; | |
}, | |
easeOutQuint(t) { | |
return 1 + (--t) * t * t * t * t; | |
}, | |
easeInOutQuint(t) { | |
return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t; | |
} | |
}; | |
const start = window.pageYOffset; | |
const startTime = 'now' in window.performance ? performance.now() : new Date().getTime(); | |
const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight); | |
const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; | |
const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop; | |
const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset); | |
if ('requestAnimationFrame' in window === false) { | |
window.scroll(0, destinationOffsetToScroll); | |
if (callback) { | |
callback(); | |
} | |
return; | |
} | |
function scroll() { | |
const now = 'now' in window.performance ? performance.now() : new Date().getTime(); | |
const time = Math.min(1, ((now - startTime) / duration)); | |
const timeFunction = easings[easing](time); | |
window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start)); | |
if (window.pageYOffset === destinationOffsetToScroll) { | |
if (callback) { | |
callback(); | |
} | |
return; | |
} | |
requestAnimationFrame(scroll); | |
} | |
scroll(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is old and can be greatly reduced just by using
Element.scrollIntoView()
: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewYou don't get the choice of many easing functions but it does the job in way less code