Files
caszl-next/app/components/BackToTop.tsx
quantulr b6a722fa79 update
2023-11-03 17:25:10 +08:00

34 lines
726 B
TypeScript

"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;