45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
import { useSignal } from "@preact/signals";
|
|
import { useEffect } from "preact/hooks";
|
|
import { ArrowUp } from "lucide-preact";
|
|
|
|
export default function ScrollUpButton() {
|
|
const isVisible = useSignal(false);
|
|
|
|
useEffect(() => {
|
|
const checkScroll = () => {
|
|
isVisible.value = window.scrollY > 50;
|
|
};
|
|
|
|
checkScroll();
|
|
|
|
window.addEventListener("scroll", checkScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", checkScroll);
|
|
};
|
|
}, []);
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={scrollToTop}
|
|
class={`fixed bottom-4 right-4 z-20 btn btn-secondary hover:btn-primary
|
|
btn-circle transition-all duration-300
|
|
${
|
|
isVisible.value
|
|
? "opacity-100 translate-y-0"
|
|
: "opacity-0 translate-y-10 pointer-events-none"
|
|
}`}
|
|
aria-label="Scroll to top"
|
|
>
|
|
<ArrowUp class="text-lg" />
|
|
</button>
|
|
);
|
|
}
|