【ISSUE】[React]react-scrollでスクロールアップ機能を簡単に実装する。

0

2024年12月23日 8:40

はじめに

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

react-scrollをインストール

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

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

インストール
img

サンプルコード

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

img

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

少しアレンジ

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

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

最後に

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

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

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

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。