【ISSUE】[React]react-scrollでスクロールアップ機能を簡単に実装する。
2024年12月23日 8:40
React(Next.js)を使って、簡単にスクロールアップを実装しました。
以下のように動作します。
今回は、「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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。