タイトル通り、クリックしたら指定した場所までスムーズにスクロールしてくれるページ内リンクを実装できるライブラリのご紹介です。
使用したライブラリは「react-anchor-link-smooth-scroll」です。
GitHub のページはこちら。
mauricevancooten/react-anchor-link-smooth-scroll: React component for anchor links using the smooth scroll polyfill.
https://github.com/mauricevancooten/react-anchor-link-smooth-scroll
ライブラリのインストールは下記コマンドで行います。
npm install react-anchor-link-smooth-scroll --save
上記が完了したら、実装していきます。
サンプルコードはこちら。
まず、ライブラリをインポートします。
import AnchorLink from 'react-anchor-link-smooth-scroll';
そして、描画部分は下記のように記述すればOKです。
<AnchorLink href='#title1'>Title1</AnchorLink> <AnchorLink href='#title2'>Title2</AnchorLink> <h3 id="title1">Title1</h3> <div> ...... </div> <h3 id="title2">Title2</h3> <div> ...... </div>
HTML でのページ内リンクとほとんど同じ書き方なので、特に難しくはないと思います。
で、実際に動作させてみたところ、スルーっとアニメーション付きでページリンク先までスクロールしてくれました！
ただ注意点として、要素に height と overflow: scroll を指定して実行したところ、スクロールしませんでした。
特に overflow: scroll がよくないみたいなので、このライブラリを使用するときは、こちらのプロパティは使用しないほうが良さそうです。
以上、React でページ内リンクを実装できるライブラリ「react-anchor-link-smooth-scroll」のご紹介でした。
ご参考になれば幸いです。
