Reactでページトップにスクロールする方法

react-scrollパッケージを使用する方法:

• react-scrollパッケージをインストールします: npm install react-scroll
• スクロールしたいコンポーネントでLinkコンポーネントを使用します:

  import { Link, animateScroll as scroll } from "react-scroll";
  const MyComponent = () => {
  const scrollToTop = () => {
   scroll.scrollToTop(); // ページトップにスクロールする
  };
  return (
   <div>
     <Link to="top" smooth={true} duration={500}>
       ページトップにスクロールする
     </Link>
     <button onClick={scrollToTop}>ボタンをクリックしてページトップにスクロールする</button>
   </div>
  );
  };

• toプロパティにはスクロール先の要素のIDを指定します。smoothプロパティはスムーズなスクロールを有効にし、durationプロパティはスクロールのアニメーションの時間を設定します。

カスタムフックを使用する方法:

• カスタムフックuseScrollToTopを作成します:

  import { useEffect } from "react";
  const useScrollToTop = () => {
  useEffect(() => {
   window.scrollTo(0, 0); // ページトップにスクロールする
  }, []);
  };
  export default useScrollToTop;

• useScrollToTopフックを使用するコンポーネントでインポートし、呼び出します:

  import useScrollToTop from "./useScrollToTop";
  const MyComponent = () => {
  useScrollToTop();
  return (
   <div>
     {/* ページのコンテンツ */}
   </div>
  );
  };