## はじめに
React(Next.js)を使って、簡単にスクロールアップを実装しました。
以下のように動作します。
![react-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/92d58744-b745-60a3-b804-f1f5366d82a4.gif)

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

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


**インストール**
![img](/mosaic-code.jpg)

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

![img](/mosaic-code.jpg)

このライブラリを使えば、以下のコードがあれば実装できるので、とても簡単ですね。
![img](/mosaic-code.jpg)

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

![img](/mosaic-code.jpg)
以上で実装は完了になります！

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

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

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

## はじめに
React(Next.js)を使って、簡単にスクロールアップを実装しました。
以下のように動作します。
![react-scroll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/92d58744-b745-60a3-b804-f1f5366d82a4.gif)

## 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>
    )
}
```
以上で実装は完了になります！

## 最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、
[基本設計について](https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc)
[Vue.jsとNode.jsでチャットアプリを作った](https://qiita.com/hukuryo/items/265c676d17fe21e75242)
[Next.js×TypeScriptでTODOアプリを作成する](https://qiita.com/hukuryo/items/ebeb26823f944f143b11)

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

https://www.npmjs.com/package/react-scroll
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

react-

続きを読むには単価診断を受けてください 30秒