42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
import { cn } from "@/lib/utils";
|
|
import { useEffect, useState } from "react";
|
|
import { IoIosArrowUp } from "react-icons/io";
|
|
|
|
const ScrollToTopButton = () => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const toggleVisibility = () => {
|
|
if (window.pageYOffset > 300) {
|
|
setIsVisible(true);
|
|
} else {
|
|
setIsVisible(false);
|
|
}
|
|
};
|
|
window.addEventListener("scroll", toggleVisibility);
|
|
return () => {
|
|
window.removeEventListener("scroll", toggleVisibility);
|
|
};
|
|
}, []);
|
|
const scrollToTop = () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={scrollToTop}
|
|
className={cn(
|
|
"fixed bottom-7 right-7 bg-primary text-white rounded z-[1000] p-2 flex items-center justify-center size-12",
|
|
isVisible ? "flex" : "hidden"
|
|
)}
|
|
>
|
|
<IoIosArrowUp size={22} />
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ScrollToTopButton;
|