caszl-next/app/_components/BackToTop.tsx

"use client";
import backTop from "@/app/_assets/backtop.png";
import Image from "next/image";
import { useScroll } from "ahooks";

/**
 * 返回到顶部
 * @constructor
 */
const BackToTop = () => {
  const position = useScroll();
  return (
    <div
      className={`fixed bottom-4 right-10 h-[50px] w-[50px] overflow-hidden`}
    >
      <Image
        onClick={() => {
          window.scroll({
            top: 0,
            behavior: "smooth",
          });
        }}
        className={`${
          (position?.top ?? 0) > 100 ? "top-0" : "top-full"
        } absolute left-0 h-full w-full cursor-pointer transition-all`}
        src={backTop}
        alt={""}
      />
    </div>
  );
};

export default BackToTop;