React で上に戻るボタンを作成する

まずはググってみる

上に戻る機能のみなら、こちらの方のコードが1番わかりやすいと思います

https://zenn.dev/sunaoproducts/articles/1818c48f60dc81

const returnTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

上記の関数をonClickで使うだけです

ある程度スクロールしたら戻るボタンを表示したい

一定の所までスクロールしたら表示されるようにしたいので、そのためにはスクロール位置を検知しなければなりません。ググっても難しいのばかりでしたので、昔使ってた素のJavaScriptのコードを使います。J Queryでもいいかなと思いましたがJavaScriptでやってみます

useEffectを使います

useEffectの中で使わないとうまく動きませんでした

useEffect(() => {
    const goTop = document.getElementById("goTop");
    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 100) {
        goTop.classList.add("fixed");
      } else {
        goTop.classList.remove("fixed");
      }
    });
  }, []);

わぉ！document.getElementById って久しぶりに見た！

スクロール時の処理は、window.addEventListener("scroll", () => {}) です

window.pageYOffset でスクロール位置を検知します

スクロール位置が100以上になったらボタンが表示されます

classListでクラスを追加する所は、useStateに変えてもいいかもです

上記2つのコードを合わせて完成です

全体コード　tailwindcssを使用してます

import React, { useEffect } from "react";

import { FaChevronUp } from "react-icons/fa";

export const GoTop = () => {

  useEffect(() => {
    const goTop = document.getElementById("goTop");
    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 100) {
        goTop.classList.add("fixed");
      } else {
        goTop.classList.remove("fixed");
      }
    });
  }, []);

  const returnTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };

  return (

    /* <!-- 上に戻るボタン --> */
    <a>
      <FaChevronUp
        id="goTop"
        className="md:text-5xl text-4xl opacity-75 font-bold text-white bg-theme rounded-full p-3 right-10 bottom-10 z-10 hover:bg-selected-button"
        onClick={returnTop}
      />
    </a>
  );
};

追伸
パフォーマンスの面でjsの"scroll"イベントは悪いので、
Intersection Observer APIを使用するようにしてください