Nextjsでスクロールボタンを作る

投稿する記事の長さが長くなると、他の記事に移動するためにはかなりスクロールしなければならない問題が発生した。

最初はナビバーを最上部に固定しようかとも考えたが、今のところアクセスする環境はほとんどがモバイルであることを考えると、画面をできるだけ広く使うことが重要ではないかと思った。

そこで、ただ最上部に移動するボタンを作った。

"use client";

import { ChevronDoubleUpIcon } from "@heroicons/react/20/solid";

export default function MoveToTopBtn() {
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth", // 滑らかなスクロール効果
    });
  }
  return (
    <div className="fixed right-6 bottom-6">
      <div
        className="bg-opacity-45 bg-white rounded-full border p-2"
        onClick={scrollToTop}
      >
        <ChevronDoubleUpIcon className="text-gray-500 size-5 font-black stroke-1 stroke-gray-500" />
      </div>
    </div>
  );
}

内容は非常に簡単だ。

window.scrollToを利用して最上部に、そしてスムーズに移動すること。

そしてclassNameで画面の右下に固定するようにした。

クリックすると最上部にちゃんと移動する。