纯Javascript scrollTo与动画

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

Answer 1

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.

Answer 2

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)