はじめに

React(Next.js)を使って、簡単にスクロールアップを実装しました。
以下のように動作します。

react-scrollをインストール

今回は、「react-scroll」というライブラリを使用していきます。
まずは、react-scrollをインストールしていきます。

ボタンのアイコンには、FontAwesomeを使用しているので、インストールしていないのであれば、以下の記事を参考にしてみてください。
https://qiita.com/hukuryo/items/766d34bb2440e2835a3e

インストール

サンプルコード

以下がreact-scrollのサンプルコードになります。

このライブラリを使えば、以下のコードがあれば実装できるので、とても簡単ですね。

少しアレンジ

以下のように、スクロールしていったらボタンを表示するように、少しアレンジしました。

以上で実装は完了になります！

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
基本設計について
Vue.jsとNode.jsでチャットアプリを作った
Next.js×TypeScriptでTODOアプリを作成する

以下がreact-scrollのドキュメントになります。

https://www.npmjs.com/package/react-scroll
[cv:issue_marketplace_engineer]