50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
import { ArrowUp } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { motion, AnimatePresence } from "framer-motion";
|
||
|
|
|
||
|
|
const BackToTop = () => {
|
||
|
|
const [isVisible, setIsVisible] = useState(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const toggleVisibility = () => {
|
||
|
|
setIsVisible(window.scrollY > 400);
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("scroll", toggleVisibility);
|
||
|
|
return () => window.removeEventListener("scroll", toggleVisibility);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const scrollToTop = () => {
|
||
|
|
window.scrollTo({
|
||
|
|
top: 0,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AnimatePresence>
|
||
|
|
{isVisible && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
||
|
|
animate={{ opacity: 1, scale: 1 }}
|
||
|
|
exit={{ opacity: 0, scale: 0.8 }}
|
||
|
|
transition={{ duration: 0.2 }}
|
||
|
|
className="fixed bottom-6 right-6 z-50"
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
onClick={scrollToTop}
|
||
|
|
size="icon"
|
||
|
|
className="h-12 w-12 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground"
|
||
|
|
aria-label="Back to top"
|
||
|
|
>
|
||
|
|
<ArrowUp className="h-5 w-5" />
|
||
|
|
</Button>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BackToTop;
|