diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js index 94888e5..7a49d04 100644 --- a/src/utils/scroll-to.js +++ b/src/utils/scroll-to.js @@ -29,21 +29,37 @@ function getScrollableContainer() { return scrollableContainer; } +/** + * Smoothly scrolls to a given Y position using Easing.Swing. It'll run a + * callback upon finishing. + * @param {number} y Offset of the page to scroll to. + * @param {number} duration Duration of the animation. 500ms by default. + * @param {function} cb Callback function to call upon completion. + */ function scrollTo(y, duration = 500, cb = () => {}) { const scrollableContainer = getScrollableContainer(); const delta = y - scrollableContainer.scrollTop; - const increment = 20; + const startLocation = scrollableContainer.scrollTop; + const increment = 16; + + if (!duration) { + scrollableContainer.scrollTop = y; + cb(); + return; + } const animateScroll = elapsedTime => { elapsedTime += increment; - const percent = elapsedTime / duration; + const percent = Math.min(1, elapsedTime / duration); + const easingP = Easings.swing( + percent, + elapsedTime * percent, + y, + delta, + duration); - scrollableContainer.scrollTop = Easings.swing( - percent, - elapsedTime * percent, - y, - delta, - duration) * delta; + scrollableContainer.scrollTop = Math.floor(startLocation + + (easingP * delta)); if (elapsedTime < duration) { setTimeout(() => animateScroll(elapsedTime), increment);