37 lines
1 KiB
TypeScript
37 lines
1 KiB
TypeScript
|
import { ChevronsUp } from "lucide-react";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
const SHOW_AFTER_PX = 400;
|
||
|
|
|
||
|
|
export default function ScrollToTopButton() {
|
||
|
|
const [visible, setVisible] = useState(false);
|
||
|
|
useEffect(() => {
|
||
|
|
const handleScroll = () => {
|
||
|
|
setVisible(window.scrollY > SHOW_AFTER_PX);
|
||
|
|
};
|
||
|
|
|
||
|
|
handleScroll();
|
||
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener("scroll", handleScroll);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const scrollToTop = () => {
|
||
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={scrollToTop}
|
||
|
|
className={`fixed bottom-6 right-6 z-50 cursor-pointer rounded-full bg-primary px-2 py-1 text-white shadow-lg transition-all hover:bg-[#FFD41F] hover:text-black duration-300 hover:opacity-90 ${
|
||
|
|
visible
|
||
|
|
? "translate-y-0 opacity-100"
|
||
|
|
: "pointer-events-none translate-y-4 opacity-0"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<ChevronsUp size={32} />
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|