update
This commit is contained in:
33
app/_components/BackToTop.tsx
Normal file
33
app/_components/BackToTop.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
"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;
|
||||
Reference in New Issue
Block a user