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

はじめに

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

react-scrollをインストール

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

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

インストール

$ npm install react-scroll

$ npm install

サンプルコード

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

ScrollUp.tsx

import React from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUp } from "@fortawesome/free-solid-svg-icons";

import { animateScroll as scroll } from "react-scroll";

export function ScrollUp() {

    const scrollToTop = () => {
        scroll.scrollToTop();
    };
    
    return (
        <div className="fixed bottom-6 right-6 z-50">
            <button 
                className={`fixed bottom-6 right-6 z-50 bg-gray-500 text-white px-4 py-3 rounded-full cursor-pointer transition-opacity`} 
                onClick={scrollToTop}
            >
                <FontAwesomeIcon icon={faArrowUp} />
            </button>
        </div>
    )
}

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

// react-scrollを実装しているコード
import { animateScroll as scroll } from "react-scroll";

const scrollToTop = () => {
   scroll.scrollToTop();
};

少しアレンジ

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

ScrollUp.tsx

import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUp } from "@fortawesome/free-solid-svg-icons";

import { animateScroll as scroll } from "react-scroll";

export function ScrollUp() {
    // スクロールアップボタンを表示、非表示させるためのState
    const [isVisible, setIsVisible] = useState(false);

    // スクロールしている高さを取得して、stateの値を更新する処理
    useEffect(() => {
        const toggleVisibility = () => {
            if (window.scrollY > 300) { // ここで表示するスクロール位置を調整
                setIsVisible(true);
            } else {
                setIsVisible(false);
            }
        };
        
        window.addEventListener('scroll', toggleVisibility);

        return () => {
            window.removeEventListener('scroll', toggleVisibility);
        };
    }, []);

    const scrollToTop = () => {
        scroll.scrollToTop();
    };
    
    return (
        <div className="fixed bottom-6 right-6 z-50">
            <button 
                className={`fixed bottom-6 right-6 z-50 bg-gray-500 text-white px-4 py-3 rounded-full cursor-pointer transition-opacity ${isVisible ? 'opacity-100' : 'opacity-0'}`} 
                onClick={scrollToTop}
                >
                <FontAwesomeIcon icon={faArrowUp} />
            </button>
        </div>
    )
}

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

最後に

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

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