70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { AnimatePresence, motion } from "framer-motion";
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export default function ScrollToTop() {
|
||
|
|
const [isVisible, setIsVisible] = useState(false);
|
||
|
|
|
||
|
|
// 1. Logic to show/hide the button based on scroll position
|
||
|
|
useEffect(() => {
|
||
|
|
const toggleVisibility = () => {
|
||
|
|
// Show button when page is scrolled down 300px
|
||
|
|
if (window.scrollY > 300) {
|
||
|
|
setIsVisible(true);
|
||
|
|
} else {
|
||
|
|
setIsVisible(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener("scroll", toggleVisibility);
|
||
|
|
|
||
|
|
// Clean up the event listener on component unmount
|
||
|
|
return () => window.removeEventListener("scroll", toggleVisibility);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 2. Function to scroll to the top smoothly
|
||
|
|
const scrollToTop = () => {
|
||
|
|
window.scrollTo({
|
||
|
|
top: 0,
|
||
|
|
behavior: "smooth",
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
// AnimatePresence allows the component to animate out when removed from the DOM
|
||
|
|
<AnimatePresence>
|
||
|
|
{isVisible && (
|
||
|
|
<motion.button
|
||
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||
|
|
// Animation states
|
||
|
|
aria-label="Scroll to top"
|
||
|
|
className="fixed right-8 bottom-4 z-50 flex size-12 cursor-pointer items-center justify-center rounded-full bg-primary text-white shadow-lg transition-colors hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
||
|
|
exit={{ opacity: 0, scale: 0.5, y: 20 }}
|
||
|
|
initial={{ opacity: 0, scale: 0.5, y: 20 }}
|
||
|
|
// Tailwind styling
|
||
|
|
onClick={scrollToTop}
|
||
|
|
transition={{ duration: 0.3 }}
|
||
|
|
>
|
||
|
|
{/* Simple SVG Arrow Icon */}
|
||
|
|
<svg
|
||
|
|
className="h-6 w-6"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth={2.5}
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<title>Scroll to top</title>
|
||
|
|
<path
|
||
|
|
d="M4.5 15.75l7.5-7.5 7.5 7.5"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</motion.button>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|