使用[React]react-scroll来简单实现滚动功能

首先

安装 react-scroll。

本次我们将使用一个名为”react-scroll”的库。
首先，我们开始安装react-scroll。

由于按钮图标使用了FontAwesome，所以如果您尚未安装，可以参考以下文章进行安装。
https://qiita.com/hukuryo/items/766d34bb2440e2835a3e

安装

$ npm install react-scroll

$ npm install

示例代码

以下是react-scroll的示例代码。

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();
};

稍微改动

我稍微调整了一下，当你滚动时，按钮会显示出来。

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的文档。