#131: simple scrollTo animation

This commit is contained in:
SleepWalker 2016-06-03 23:51:45 +03:00
parent 664a3a6de7
commit 57924cac79
2 changed files with 30 additions and 1 deletions

View 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);
});
}

View File

@ -53,6 +53,7 @@ userFactory(store)
}); });
import scrollTo from 'components/ui/scrollTo';
const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing) const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing)
/** /**
* Scrolls to page's top or #anchor link, if any * Scrolls to page's top or #anchor link, if any
@ -73,7 +74,7 @@ function restoreScroll() {
y = scrollTop + top - SCROLL_ANCHOR_OFFSET; y = scrollTop + top - SCROLL_ANCHOR_OFFSET;
} }
window.scrollTo(0, y); scrollTo(y);
}, 100); }, 100);
} }