React での上へのスクロール

React でページ機能の一番上までスクロールしてボタンを作成する方法を紹介します。

React で react-scroll-to-top ライブラリを使用して Scroll toTop ボタンを作成する

1つのページに多くのコンテンツがある場合、ユーザーがスクロールして一番上に到達し、ナビゲーションを表示したり、別のページに移動したりすることは困難です。しかし、開発者として、私たちは常に、ユーザーがボタンを 1 回クリックするだけで一番上までスクロールできるようにする方法を見つけています。

トップへのスクロールボタンを作成しようとすると、すべての機能が実行されるため、少しコードを記述しなければならない場合があります。しかし、React アプリケーションで作業しているときは、私たちの生活を楽にするために作成されたライブラリをインストールすることで、この機能を実現できます。

ボタンだけで一番上までスクロールする例を見てみましょう。

react-scroll-to-top と呼ばれるライブラリを使用して、scroll-to-top 機能を取得します。それでは、次のコマンドを使用して、React で新しいアプリケーションを作成しましょう。

# react
npx create-react-app my-app

React で新しいアプリケーションを作成した後、このコマンドを使用してアプリケーションディレクトリに移動します。

# react
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# react
npm start

それでは、npm を使用してライブラリ react-scroll-to-top をインストールしましょう。

# react
npm i react-scroll-to-top

ライブラリがインストールされると、App.js に ScrollToTop をインポートできるようになります。

# react
import ScrollToTop from "react-scroll-to-top";

ここで、デフォルトの関数内で、ページの約 200vh をカバーするテンプレートを返し、上部にスクロールします。また、スムーズなスクロールのための smooth やアイコンの色を設定するための color などのいくつかの設定を含む ScrollToTop コンポーネントを返します。

したがって、App.js のコードは次のようになります。

# react
import React from "react";
import "./styles.css";
import ScrollToTop from "react-scroll-to-top";

export default function App() {
  return (
    <div className="App">
      <ScrollToTop smooth color="#000" />
      <h1>Scroll To See Magic</h1>
      <p style={{ marginTop: "200vh" }}>You Have Reached Bottom</p>
    </div>
  );
}

それでは、アプリケーションがどのように機能するかを確認しましょう。

出力：

上の画像でわかるように、アプリケーションに 1 行のコードを追加することで、上にスクロールするアニメーションを正常に作成できました。

このようにして、複数行のコードを記述しなくても、どのページでも上にスクロール機能を使用できます。