Nextjs에서 스크롤 버튼 만들기

포스팅 하는 글의 길이가 길어지다보니, 다른 글로 이동하기 위해서는 위로 많이 스크롤을 해야하는 문제가 생겼다.

처음에는 navbar를 최상단에 고정할까 싶기도 했지만, 접속하는 환경이 이제는 대부분 모바일이라는 점을 고려하면 화면을 최대한 넓게 쓰는 것이 중요하지 않을까 하는 생각이 들었다.

그래서 그냥 최상단 이동 버튼을 만들었다.

"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에서 화면의 우측 하단에 고정되도록 만들었다.

클릭하면 최상단으로 잘 이동한다.