【React】上まで戻る(Scroll to top)を実装する方法を解説

2023年1月3日

Reactで上まで戻る(Scroll to top)を実装する方法を解説します。

モグモグさん

よく使う実装です。

ライブラリもたくさんあります。

バージョン

react 18.2.0

上まで戻る処理を実装
表示タイミングを調整する
まとめ

上まで戻る処理を実装

早速上まで戻る処理を実装しましょう。

モグモグさん

本記事では超簡易的にテキストを表示していますが、UIはお好きなようにしてください！

window.scrollTo({ top: 0, behavior: "smooth" })}でページの一番上までスクロールするようにしています。

詳細な仕様はドキュメントを確認ください。

import { FC } from "react";

export const Comp: FC = () => {
  return (
    <span
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      className="scroll-to-top">
        上まで戻る
    </span>
};

表示タイミングを調整する

上まで戻るは実装できましたが、実際のユースケースでは一定の箇所までスクロールするとUIが表示されるというのが一般的ですのでそのタイミングを調整しましょう。

y軸が200までスクロールされた場合にUIを表示しています。

モグモグさん

数字はみなさんの環境に合わせてください。

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

export const Comp: FC = () => {
  // 表示切り替えフラグ
  const [showScrollToTop, setShowScrollToTop] = useState(false);

  // スクロールイベントをListen
  useEffect(() => {
    window.addEventListener("scroll", watchScroll);
    return () => {
      window.removeEventListener("scroll", watchScroll);
    };
  }, []);

  // Scrollを検知しボタン表示のフラグを切り替え
  const watchScroll = () => {
    const basePosition = 200;
    const scrollPosition = window.scrollY;
    setShowScrollToTop(basePosition <= scrollPosition) ;
  };

  return (
    ....
    {showScrollToTop && (
      <span
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
        className="scroll-to-top">
          上まで戻る
      </span>
    )}
};