上部へ移動button

使うプロパティ

document.body.scrollHeight： document全体の高さ

window.innerHeight：表示されている領域の高さ = ビューポート

window.scrollY：初期表示の領域は含めず、スクロールし始めてからのスクロール量

パターン A

const [showButton, setShowButton] = useState(false);

useEffect(() => {
    const handleScroll = () => {
      const isBottom =
        window.innerHeight + window.scrollY >= document.body.scrollHeight;
      setShowButton(isBottom);
    };
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

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

---

    <div>
      {showButton && (
        <button
          className="size-6 bg-orange-500 text-white text-2xl fixed bottom-2 right-2"
          onClick={scrollToTop}
        >
          button
        </button>
      )}
    </div>

document.body.scrollHeight === window.innerHeight + window.scrollY
- 一番下までスクロールした段階でtrueになる
スクロールを含めた高さの総量の半分を超えた所でButtonを表示したい場合：
- document.body.scrollHeight / 2;

パターン B

const ScrollToTopButton: React.FC = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.scrollY > 400) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener("scroll", toggleVisibility);
    return () => window.removeEventListener("scroll", toggleVisibility);
  }, []);

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

  return (
    <button
      onClick={scrollToTop}
      className={`fixed bottom-4 size-14 sm:size-20 flex items-center justify-center right-4 p-3 bg-rose-500 text-white hover:opacity-80 rounded-full shadow-lg transition-opacity duration-300 ${
        isVisible ? "opacity-100" : "opacity-0"
      }`}
    >
      <ChevronUp/>
    </button>
  );
};

window.innerHeight（ = ビューポート）を超えてからどれだけスクロールしたかでボタンの表示をトグルするパターン

上部に戻る時のパターン

ボタンをクリックして上部に戻るパターンをいくつか

window.scrollTo

window.scrollTo({ top: 0, behavior: "smooth" });

ref

const topRef = useRef<HTMLDivElement>(null);

const scrollToTop = () => {
  topRef.current?.scrollIntoView({ behavior: "smooth" });
};

return (
  <>
    <div ref={topRef}></div>


    <button onClick={scrollToTop}>↑</button>
  </>
);

refは「target要素」を指定

id

<div id="top"></div>

<a href="#top">To Top</a>

React：上部へ移動Button

React：上部へ移動Button