react-scroll を導入し超簡単に画面内のスクロールを実装しよう

install-react-scroll

はじめに

React 向けにスムーズなスクロールを簡単に実装することができる react-scroll の導入を紹介します。
実装時間の目安は約 5 分と超お手軽です。

成果物

最終的にできあがる成果物はこちらです。
ヘッダーにある コンセプト採用試験ブログ をクリックすると該当箇所までスムーズにスクロールできています。
scroll5

バージョン情報

  • Node.js:15.11.0
  • React:17.0.2
  • Next.js:10.2.2
  • react-scroll:1.8.2

react-scroll を選んだ理由

『React scroll』で検索するとトップにヒットし、現在 GitHub のスター数が 3.4k となっているため、多くの人が利用しているメジャーなパッケージだと判断したためです。
また、実際に導入した感想として、最低限必要な機能をしっかりと押さえつつ、導入が非常に簡単だと思いました。
ただ、GitHub のドキュメントだけをパッと見るとちょっとめんどくさそうに感じるため、こちらで react-scroll の導入を手軽に行いたい方向けにまとめることにしました。

導入手順

react-scroll のインストール

npm もしくは yarn でインストールします。
# npm の方 npm install --save-dev react-scroll # yarn の方 yarn add --dev react-scroll
簡単ですがこれで準備は完了です。
今回は devDependencies にインストールするようにオプションの --save-dev もしくは --dev を付けていますが、この辺りは適宜環境に合わせてください(動かなかった場合にオプションなしでインストール)。

react-scroll の初期設定

まずはスクロールを行いたい要素に id を付けます。
<section id="concept">...</section>
そこに コンセプト というボタンを押してスクロールをしたい場合には以下のように設定します。
// src/component/PageHeader.tsx import { Link as Scroll } from 'react-scroll'; export default function PageHeader(): JSX.Element { return ( <div> ... <nav> <Scroll to="concept">コンセプト</Scroll> </nav> ... </div> ); }
こちらが正しい実行結果です。
scroll01
Scroll コンポーネントの to で指定した id までジャンプできれば正しく動作しています。
ここで、react-scrollLink コンポーネントを Scroll と名前を変えて読み込んでいる理由は、next/linkLink と混在するためです。
基本的には next/linkLink コンポーネントを利用すると思いますので、ここは名前を変えておく方が無難でしょう。

スムーズなスクロールへ

さらに今回の目的であるスムーズにスクロールするためには以下のように smooth を設定します。
// src/component/PageHeader.tsx import { Link as Scroll } from 'react-scroll'; export default function PageHeader(): JSX.Element { return ( <div> ... <nav> <Scroll to="concept" smooth={true}> コンセプト </Scroll> </nav> ... </div> ); }
こちらが正しい実行結果です。
scroll02

スクロールにかける時間を調整

スクロールの時間がすこしゆっくりだと感じたかもしれません。
ここは duration でミリ秒単位の調整が可能です。
// src/component/PageHeader.tsx import { Link as Scroll } from 'react-scroll'; export default function PageHeader(): JSX.Element { return ( <div> ... <nav> <Scroll to="concept" smooth={true} duration={600}> コンセプト </Scroll> </nav> ... </div> ); }
こちらが正しい実行結果です。
scroll03

スクロール位置の調整

指定した id にギリギリのところよりも上に少し余白を持たせて止めたいという場合もあります。
この場合には offset で調整可能です。
上側に 50px の余白を持たせたい場合は以下のようになります。
// src/component/PageHeader.tsx import { Link as Scroll } from 'react-scroll'; export default function PageHeader(): JSX.Element { return ( <div> ... <nav> <Scroll to="concept" smooth={true} duration={600} offset={-50}> コンセプト </Scroll> </nav> ... </div> ); }
こちらが正しい実行結果です。
scroll04

ホバー時の装飾を調整

コンセプト というボタンの装飾がされていなかったため、最後にこの点を調整しておきましょう。
通常の CSS で調整も可能ですし、Tailwind CSS での調整も可能です。
fwywd のチームでは Tailwind CSS(JIT モード)を利用しているため、以下のように className で調整を行いました。
// src/component/PageHeader.tsx import { Link as Scroll } from 'react-scroll'; export default function PageHeader(): JSX.Element { return ( <div> ... <nav> <Scroll to="concept" smooth={true} duration={600} offset={-50} className="font-medium text-[#008c8d] hover:opacity-50 hover:cursor-pointer" > コンセプト </Scroll> </nav> ... </div> ); }
scroll05
これで今回の成果物に到達することができました。

おわりに

react-scroll の導入はたったの5分

react-scroll の機能は今回紹介した smooth, duration, offset 以外にもあります。
こちらは react-scroll - GitHub を参照してみてください。
もちろん自前でも実装することが可能なスクロール機能ですが、react-scroll を使うことでとても手軽に導入できるため、ぜひみなさんも使ってみてください。
株式会社キカガク 代表取締役会長
吉崎 亮介
twitter: @yoshizaki_91

【受講料無料】経営力と技術力を兼ね備えた起業家を目指そう

awaji
キカガクの創業者であり、fwywd 責任者である吉崎が次に手掛けるのは『本気の起業家育成』。
経営力と技術力の両方を兼ね備えた人材を育成し、これからの日本の変革に挑戦します。
これからは挑戦しないことがリスクになる時代
起業家として成功すべく試行錯誤する日々は確実に市場価値を高めます。
そして、起業家育成の舞台は淡路島
パソナグループがベンチャーアイランドとして変革を起こしているこの地で、仲間と切磋琢磨できる1年間を提供します。
宿泊などの生活面もパソナグループが全面バックアップで、挑戦するには最も良い環境です。