Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | 1x 1x 1x 1x 1x | "use client";
import { useEffect, useState } from "react";
import { UpArrowIcon } from "../../ui/icons";
import { Button } from "@/components/ui";
export default function ScrollToTop() {
const [isVisible, setIsVisible] = useState(false);
// Top: 0 takes us all the way back to the top of the page
// Behavior: smooth keeps it smooth!
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth"});
};
useEffect(() => {
// Button is displayed after scrolling for 500 pixels
const toggleVisibility = () => {
if (window.pageYOffset > 300) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
window.addEventListener("scroll", toggleVisibility);
return () => window.removeEventListener("scroll", toggleVisibility);
}, []);
return (
<>
{isVisible && (
<Button
onClick={scrollToTop}
variant="primary"
size="sm"
className="w-10 h-10 rounded-[4px] shadow-lg fixed bottom-24 right-8 z-999"
aria-label="Scroll to top"
>
<UpArrowIcon />
</Button>
)}
</>
);
}
|