纯 Javascript 带有动画的 scrollTo

Question

我想隐藏我的代码以滚动动画。我查找的很多解决方案都是必须提供元素等的功能。我已经确切地知道我需要向下滚动的数量。我只需要为它制作动画。

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

Answer 1

如果您已经在使用 React，我建议您以声明的方式进行滚动，而不是自己操作 DOM。

查看类似 react-scroll 的内容。

它允许您执行以下操作：

scroll.scrollMore(100)

只需在您想要的任何生命周期事件中弹出即可。

Answer 2

如果你想window滚动到某个特定位置，那么可以考虑使用url锚点。
在这里查看 how to use url anchor

如果你试图在滚动时有 "transition" 效果，那么考虑使用 "transform" 而不是滚动。（这更适合在元素内部滚动，而不是 window 本身）

Pure Javascript scrollTo with animation