mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-15 17:59:00 +05:30
#131: simple scrollTo animation
This commit is contained in:
parent
664a3a6de7
commit
57924cac79
28
src/components/ui/scrollTo.js
Normal file
28
src/components/ui/scrollTo.js
Normal file
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* Implements scroll to animation with momentum effect
|
||||
*/
|
||||
|
||||
const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
|
||||
|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
|
||||
|
||||
const DURATION = 500;
|
||||
export default function scrollTo(y) {
|
||||
const start = Date.now();
|
||||
const {scrollTop} = document.body;
|
||||
const delta = y - scrollTop;
|
||||
|
||||
requestAnimationFrame(function animateScroll() {
|
||||
const elapsed = Date.now() - start;
|
||||
|
||||
let interpolatedY = scrollTop + delta * (elapsed / DURATION);
|
||||
|
||||
if (interpolatedY < y) {
|
||||
requestAnimationFrame(animateScroll);
|
||||
} else {
|
||||
interpolatedY = y;
|
||||
}
|
||||
|
||||
window.scrollTo(0, interpolatedY);
|
||||
});
|
||||
}
|
||||
|
@ -53,6 +53,7 @@ userFactory(store)
|
||||
|
||||
});
|
||||
|
||||
import scrollTo from 'components/ui/scrollTo';
|
||||
const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
|
||||
/**
|
||||
* Scrolls to page's top or #anchor link, if any
|
||||
@ -73,7 +74,7 @@ function restoreScroll() {
|
||||
y = scrollTop + top - SCROLL_ANCHOR_OFFSET;
|
||||
}
|
||||
|
||||
window.scrollTo(0, y);
|
||||
scrollTo(y);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user