Pure Javascript scrollTo with animation

Question

I want to covert my code to scroll with animation. A lot of solutions I looked up were functions that had to provide element, etc. I already know exactly the amount I need to scroll down. I just need to animate it.

reactScrollTo(nextPos){
    let elem = document.getElementById('ref-'+nextPos);
    let amount = elem.offsetTop+530
    window.scrollTo(0, amount);
}

[window.requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) — Andrei Nemes, Oct 18 '17 at 10:27
https://stackoverflow.com/questions/26625387/smooth-scrolling-in-javascript/26625940 — pawel, Oct 18 '17 at 11:12

score 0 · Accepted Answer · answered Oct 18 '17 at 10:31

If you're already using React, I would suggest doing your scrolling in a declarative way, instead of manipulating the DOM yourself.

Check out something like react-scroll.

It allows you to do stuff like:

scroll.scrollMore(100)

Just pop that in whatever lifecycle event you want.

score 0 · Answer 2 · answered Oct 18 '17 at 11:00

if you want to do window scroll to some specific position then maybe consider use url anchor.
check here how to use url anchor

if you try to have "transition" effect while scrolling, then consider use "transform" instead of scrolling.(this is more suitable for scroll inside an element, not window itself)

Pure Javascript scrollTo with animation

2 Answers2