Reactで作っているもので、ページ内スクロールを実現する必要が出てきたので調べました。
昔は smooth-scroll.js にはよくお世話になっていましたが、ああいうイメージです。

React Scrollが諸々揃っていて便利

スクロールで想定するケースはこの辺り

指定コンテンツまでスクロールする

• 見出しのようなページ内リンクを押下時に指定コンテンツまでスクロールする
• 画面下に設置するページトップへ戻るボタン

今回見つけた react-scroll がいい感じに動きました

fisshy/react-scroll: React scroll component

試してみる

環境は以下です

• Node.js v16.13.1
• React v18.1.0
• react-scroll v1.8.7

指定コンテンツまでスクロールする

ほぼほぼREADMEに書いてありますが、対象となるエリアに name か id 属性を付与し、 react-scroll の Link コンポーネントにto Propsとして先程設定した値を入れるだけで基本形ができます。

import { Link, Element } from 'react-scroll';

<div className="body">
    <Link to="aSection" smooth>AAA</Link>
    <Link to="bSection" smooth>BBB</Link>
    
    <section id='aSection' style={{minHeight: '500px'}}>
      <Element name="test1" className="element">
      <h1>Aセクション</h1>
      </Element>
    </section>

    <section id='bSection' style={{minHeight: '500px'}}>
      <h1>Bセクション</h1>
    </section>
</div>

Next.jsで使うと next/link とコンポーネント名が被るのがちょっとした注意ポイントかもしれません。

Propsとしては、他にもsmoothscroll のような挙動にしたり、タブやアコーディオンUIなどで高さが動的に変わった場合に高さ(距離)を再計算するものも実装されています。

個人的に地味に嬉しかったのが、ヘッダーがスクロールするサイトの場合コンテンツにヘッダーが被ってしまうのはあるあるですが、その際にCSSでpaddingを使って当てていた offset までもが、Propsで設定できるようになっている点です。

Scrollイベントを検知するためのメソッドがあるのは確認出来たのですが、あくまでこのライブラリでスクロールした時に検知できるもののようでした。
他に方法があるのかもしれないのですが見つかりませんでした。

こういうシンプル単機能なコンポーネントってハマると使いやすいですね