在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中设置固定在屏幕右下角。

点击后可以顺利移动到顶部。