はじめに

今回、よくサイトでページ下部に固定表示されている「ページトップへ戻る」という機能をreactで実装する機会があったのでアウトプットとしてこの記事を残します。

アニメーションの調査

ページトップに戻るアニメーションを実装しようとした際に最初に思い浮かんだのは、jQueryでの実装でした。
しかし、そもそもjQueryはライブラリのサイズが大きくて古いということだったので他のreactに対応しているアニメーションパッケージを調査することにしました。
そこで見つけたのがreact-scrollというパッケージ。
react-scrollは様々なfunctionがパッケージに含まれていて、scrollToTopやscrollToBottomなどの関数で簡単にページ上下へのスクロールが実装できます。

react-scroll
・https://www.npmjs.com/package/react-scroll

完成形

アニメーションの挙動はこんな感じです。

実装方法

①react-scrollをインストール

②react-scrollからanimateScroll as scrollをimportする

③functionとしてscrollToTopを定義する

④ボタンをクリックした時にイベントが発火するように
onClick={scrollToTop} を記述。

実際に書いたコードがこちら↓

/**
 * そのページの先頭に戻る
 */

export const BackTop: React.FC<Props> = ({ onClick }: Props) => {
  return (
    <div className="bg-gray-100">
      <div className="container mx-auto py-4 max-w-screen-md">
        <div className="px-20">
          <TextButton
            text={'⬆　このページの先頭へ'}
            onClick={onClick}
            buttonClassName="w-full"
            textClassName=" text-gray-400 font-bold"
          />
        </div>
      </div>
    </div>
  );
};

これはまだコンポーネントの状態でonClick={scrollToTop}でボタンをクリックしたした際のアニメーションが実装されていません。実際に今回作成したBackTopコンポーネントを使うページでfunctionとしてscrollToTopを定義するとアニメーションが実装できます。

※また今回はTextButtonのコンポーネントを使用しています

まとめ

functionとしてscrollToTopを定義してonclickで発火させるだけで意外と簡単に実装できました。
react-scrollの他にもscroll用パッケージが何個ありましたが、僕はこれが一番シンプルで簡単に実装できると思いました。
またreactに関する知識(JavaScript自体)がまだまだだなと感じたのでまだまだ勉強が必要です笑