平滑滚动单击事件

Question

我正在尝试使用javascript库react创建平滑的滚动效果。 我不想使用JQuery。

当用户单击他转到页面适当部分的链接时，我想存档。

我的handleScroll函数如下：

handleScroll(ref, offsets, event){
    event.preventDefault();
    let offset = offsets[ref]; // this is where it needs to scroll for example 900
    let activeLinks = {};
    activeLinks[ref] = "active";
    let start = new Date().getTime();
    let time = 4000;
    let offsetTo = this.state.offsetTo; //offsetTo is 0 on page load
    let timer = setInterval(function() {
        let step = Math.min(1,(new Date().getTime()-start)/time);
        offsetTo = offsetTo + 40;
        if(offsetTo >= offset) {
            return;
        }
        window.scrollTo(0, offsetTo);
        if( step == 1) clearInterval(timer);
    },10);
    this.setState({activeLinks: activeLinks}, () => timer);
}

这工作得很好，但前提是我在页面顶部。 当我单击链接时，它会转到带有动画的相应部分。

但是，当我单击其他链接时，它起作用了，但是它是从顶部开始的，而不是从我所在的地方开始。

我需要找到一种方法将offsetTo设置为适当的值，然后根据它转到顶部或底部。

知道我该怎么做吗？

Answer 1

https://github.com/fisshy/react-scroll应该可以解决问题。

看例子，很简单。