トップへ移動button

import { useRef, useState, useEffect } from "react";

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",
    });
  };

• const isBottom の中は trueかfalseになる式　setShowButton(isBottom); でstateを更新

1. window.addEventListener("scroll", handleScroll);: この行は、ページがスクロールされるたびに実行される handleScroll 関数を、scroll イベントに対して登録します。つまり、ページがスクロールされるたびに、handleScroll 関数が呼び出されます。
2. return () => { window.removeEventListener("scroll", handleScroll); };: この行は、コンポーネントがアンマウント（コンポーネントがDOMツリーから取り除かれること）されるときに実行されるクリーンアップ関数を定義しています。このクリーンアップ関数は、ページがスクロールされるたびに呼び出されるイベントリスナーを削除します。つまり、コンポーネントがアンマウントされるときに、ページのスクロールイベントのリスナーが削除されます。

<div>
        {showButton && (
          <button
            onClick={scrollToTop}
            style={{
              position: "fixed",
              bottom: "20px",
              right: "20px",
              zIndex: "10", 
            }}
          >
            一番上へ
          </button>
        )}
</div>

論理積：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND

「showButtonがtrueならば右の内容、falseならば何もしない」

コンポーネント

posts / [slug] / page.jsx 内で使用するとエラーになるのでコンポーネントにする

完成系：

"use client";
import { useState, useEffect } from "react";
import React from "react";
import { Button } from "../../../components/ui/button";
import { ArrowUp } from "lucide-react";

const ToTopButton = () => {
  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",
    });
  };

  return (
    <div>
      {showButton && (
        <Button
          size="sm"
          onClick={scrollToTop}
          style={{
            position: "fixed",
            bottom: "10px",
            right: "10px",
            zIndex: "10", 
          }}
        >
          <ArrowUp />
        </Button>
      )}
    </div>
  );
};

export default ToTopButton;