投稿目的

よりよい方法をご教授いただきたい

本題

個人開発(TypeScript × React)の中で、一覧を表示させる画面を作成しました。
一覧に表示させる配列のlengthが大きくなってくると、ページの一番上まで戻るのが大変になってきます。
そのため、よくある「ワンクリックでページ先頭に戻る」ボタンを作成したいと思いました。

実装してみる

Stack Blitz(外部)

ScrollTopButton.tsx

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

export const ScrollTopButton: FC = memo(() => {
  const [windowTop, setWindowTop] = useState<number>(0);

  const handleScroll = () => setWindowTop(window.scrollY);

  useEffect(() => {
    // mount時に実行
    window.addEventListener("scroll", () => handleScroll());
    // unmount時に実行
    return window.removeEventListener("scroll", () => handleScroll());
}, []);

  return (
     <button
      className={`mx-4 normal-case btn btn-outline btn-sm bottom-1 right-1 fixed${windowTop > 100 ? " visible" : " invisible"}`}
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
    >
      <span>画面TOPへ戻る</span>
    </button>
  );
});

いい感じですね。
GIFだと粗いですが、以下のような挙動を示しています。

・画面が下にスクロールされ、window.scrollYが100以上になると「画面TOPへ戻る」ボタンが表示される
・「画面TOPへ戻る」ボタンを押下すると、画面が一番上までスクロールされる
・画面が一番上までスクロールされると、「画面TOPへ戻る」ボタンは非表示となる

個人開発では、<button>にtransition: visibility 0.25s のスタイルも当ててみました。

最後に

結構簡単に実装できました。
素のJavascriptで実装する方法などは結構見つかりましたが、Reactで実装する方法はなかなか出ず...
本記事が助けになれば幸いです。