File size: 1,372 Bytes
c2efbe6 | 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 49 50 51 52 53 | import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronUp } from "lucide-react"
import "./ScrollToTop.css"
const ScrollToTop = () => {
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 (
<AnimatePresence>
{isVisible && (
<motion.button
className="scroll-to-top-Premium"
onClick={scrollToTop}
initial={{ opacity: 0, scale: 0 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
transition={{ duration: 0.3 }}
>
<div className="scroll-icon-container">
<ChevronUp size={24} />
<div className="scroll-glow"></div>
</div>
<div className="scroll-ripple"></div>
</motion.button>
)}
</AnimatePresence>
)
}
export default ScrollToTop |