スクロール制御の極意！React.jsでレンダリング後にページの先頭にスクロールする3つの方法

2024-04-02

React.jsでレンダリング後にページの先頭にスクロールする

useEffect フックは、コンポーネントがレンダリングされた後、または状態やプロパティが更新された後に実行されるコードを指定するために使用できます。

const App = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <p>This is my app.</p>
    </div>
  );
};

このコードでは、useEffect フックを使用して、コンポーネントがレンダリングされた後に window.scrollTo(0, 0) を呼び出しています。window.scrollTo(0, 0) は、ページの横方向と縦方向のスクロール位置をそれぞれ 0 に設定します。

useRef フックは、コンポーネントのライフサイクル全体で永続的に保持される値を作成するために使用できます。

const App = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    scrollRef.current.scrollTo(0, 0);
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <p>This is my app.</p>
      <div ref={scrollRef}>
        <p>This is a scrollable div.</p>
      </div>
    </div>
  );
};

このコードでは、useRef フックを使用して scrollRef という変数を作成しています。scrollRef は、div 要素への参照を保持します。

useEffect フック内で、scrollRef.current.scrollTo(0, 0) を呼び出すことで、div 要素の先頭にスクロールできます。

アンカーリンクを使用して、ページ内の特定の位置にスクロールすることもできます。

<a href="#top">Scroll to top</a>

const App = () => {
  return (
    <div>
      <h1 id="top">My App</h1>
      <p>This is my app.</p>
      <a href="#top">Scroll to top</a>
    </div>
  );
};

このコードでは、<h1> 要素に id="top" という ID を割り当てています。

a 要素の href 属性に #top を指定することで、ユーザーがアンカーリンクをクリックすると、ページの <h1> 要素の先頭にスクロールされます。

これらの方法のいずれを使用しても、React.jsでレンダリング後にページの先頭にスクロールすることができます。

補足

上記のコード例は、単純な例です。実際のアプリケーションでは、より複雑な要件を満たすために、これらのコードを修正する必要がある場合があります。
useEffect フックを使用する場合は、依存関係のリストを空の配列にすることを忘れないでください。これにより、コードが一度だけ実行されます。
useRef フックを使用する場合は、scrollRef.current が null ではないことを確認する必要があります。

useEffect フックを使う

const App = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <p>This is my app.</p>
    </div>
  );
};

useRef フックを使う

const App = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    scrollRef.current.scrollTo(0, 0);
  }, []);

  return (
    <div>
      <h1>My App</h1>
      <p>This is my app.</p>
      <div ref={scrollRef}>
        <p>This is a scrollable div.</p>
      </div>
    </div>
  );
};

アンカーリンクを使う

<a href="#top">Scroll to top</a>

const App = () => {
  return (
    <div>
      <h1 id="top">My App</h1>
      <p>This is my app.</p>
      <a href="#top">Scroll to top</a>
    </div>
  );
};