点击事件

Question

我尝试使用javascript库做出反应来创建平滑的滚动效果。我不想使用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应该做到这一点。

看看这些例子，这很简单。