クリックイベントでスムーズなスクロール

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このトリックを行う必要があります。

例を参照してください。かなり簡単です。