TLDR

あなたが私のようで、コードに直行したい場合は、コードサンドボックス here で最終結果を見てください.
反応依存関係に Framer Motion を追加することを忘れないでください.

npm install framer-motion

ScrollToTop ボタン

今のところ、常に画面に表示される単純なボタンを作成します.
後で、セクション Scroll progress で、少し下にスクロールしたときにのみ表示されるように変更します.

import "./styles.css";

export default function ScrollToTop() {
  return (
    <button
      className="scrollToTop-btn"
    >
      Click Me!
    </button>
  );
}

スタイル

ボタンが生々しすぎるので、インポートしたスタイル ファイルにスタイルを追加します.
すでにスタイルをインポートし、className をボタンに追加しています.
ボタンは自由にカスタマイズできます.創造性を発揮してください.
スタイル付きボタンの例を次に示します.

.scrollToTop-btn {
  display: flex;
  justify-content: center;
  align-items: center;

  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1rem;
  line-height: 3rem;

  background-color: #007acc;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
}

アイコン

ここで、ボタンの内容を直感的なアイコンに変更します.
アイコンを提供しているウェブサイトはたくさんあります.ここでは Font Awesome を使用しますが、最も気に入ったものを自由に使用してください.
SVG コードを抽出します. SVG は、画像を形成する一連のベクトルです (より正確な定義については、この link を確認してください).

  //...

  const arrowUp = (
    <svg
      className="arrowUp" // <-- add this for styling
      aria-hidden="true"
      focusable="false"
      data-prefix="fas"
      data-icon="chevron-up"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 448 512"
    >
      <path
        fill="currentColor"
        d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"
      ></path>
    </svg>
  );

  return (
    <button
      className="scrollToTop-btn"
    >
      {arrowUp} // <--- change here
    </button>
  );
}

アイコンに width と height を追加します.

.arrowUp {
  width: 2rem;
  height: 2rem;
}

オンクリック

ボタンのビジュアルが完成!goToTop 関数を使用してボタン ロジックを追加します.goToTop 関数は、より自然でスムーズな動作 top: 0 で、ページの先頭までスクロールします behavior: "smooth" .

//...

  // Add the smooth behavior to go to top
  const goToTop = () => {
    document.documentElement.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  };

  return (
    <button
      className="scrollToTop-btn"
      onClick={goToTop} // <--- add this
    >
      {arrowUp}
    </button>
  );
}

フレーマ モーション

ナイス ボタンが機能するようになったので、モーション 💃 を追加します.
アニメーションは、コンポーネントを目立たせる優れた方法です.ただし、注意して、やりすぎないようにしてください.私を信じてください、私はその道を通り抜けました. 😅

そのために、Framer Motion を使用します. Framer Motion は、React 用のプロダクション対応アニメーション ライブラリです.プレーンな CSS でアニメーションを作成するよりもはるかに簡単にアニメーションを作成できます.

インストール

次のコマンドを実行して、依存関係を追加します.

npm install framer-motion

ボタンをmotion.buttonに変換

次に、モーションの使用を開始するには、モーションをインポートし、ボタン タグを motion.button タグに変更します.

import { motion } from "framer-motion";

//...
  return (
    <motion.button // <--- change here
      className="scrollToTop-btn"
      onClick={goToTop}
    >
      {arrowUp}
    </motion.button> // <--- and change here
  );
}

モーション アニメーションとトランジション

そして出来上がり、それは簡単です!
これで、Framer Motion Library API を使用して、ボタンにアニメーションとトランジションを追加できます.

ここで、すべてのアニメーションを追加します.それらの名前はほとんど自明ですが、Framer Motion documentation で詳細を確認し、コンポーネントにアニメーションを追加する新しい興味深い方法を学ぶことをお勧めします.
Framer Motion で実行できる主要なアニメーションを確認できる非常に直感的なページがあります.

ボタンの開始と終了をアニメーション化するために、initial、animate、および exit プロパティを追加しました.また、ホバリング中およびボタンのタップ/クリック中のアニメーションも追加しました.

//...
  return (
    <motion.button
      className="scrollToTop-btn"
      onClick={goToTop}
      initial={{ y: 100, opacity: 0 }}
      animate={{ y: 0, opacity: 1,
                 transition: { duration: 0.6 } }}
      exit={{ y: 100, opacity: 0,
                 transition: { duration: 0.6 } }}

      whileHover={{
        scale: 1.2,
        transition: { duration: 0.2 }
      }}

      whileTap={{ scale: 1 }}
    >
      {arrowUp}
    </motion.button>
  );
}

スクロールの進行状況

アニメーションが完了すると、ボタンがいつ表示されるかを確認するためのスクロールの進行状況が失われます.

まず、react から useState と useEffect をインポートします.

import { useState, useEffect } from "react";

次に、スクロールバーの Y/高さの位置を持つこの scrollPosition ステートを作成します.

/...
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener("scroll", updatePosition);

    return () => window.removeEventListener("scroll", updatePosition);
  }, []);
//...

最後に、scrollPosition 状態のモーション ボタンを条件付きで表示します.

  return (
    {scrollPosition > 100 && (
      <motion.button
      //...
      </motion.button>
    )}
  );

モーション AnimatePresence

最後に、AnimatePresence を使用して exit プロパティを使用できるようにします.ページの上部にいるとき、ボタンは正常に終了します.

import { motion, AnimatePresence } from "framer-motion";

return (
    <AnimatePresence>
      {scrollPosition > 100 && (
        <motion.button
        //...
        </motion.button>
      )}
    </AnimatePresence>
  );

最終結果

完全な最終バージョンを見たい場合は、コード サンドボックス here を確認してください.
私は常に学習している人なので、皆さんに提案をすることをお勧めします!
反応プロジェクトまたは Web アプリに追加できるモーション アニメーションを備えたこの scrollToTop コンポーネントをお楽しみいただけたでしょうか.