33 lines
983 B
JavaScript
33 lines
983 B
JavaScript
import { useState, useEffect } from 'react'
|
|
import { ArrowUp } from 'lucide-react'
|
|
|
|
export default function FloatingScrollTop() {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
|
|
const toggleVisibility = () => {
|
|
setIsVisible(window.scrollY > 300)
|
|
}
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('scroll', toggleVisibility)
|
|
return () => window.removeEventListener('scroll', toggleVisibility)
|
|
}, [])
|
|
|
|
return (
|
|
<button
|
|
onClick={scrollToTop}
|
|
className={`fixed bottom-8 right-8 w-12 h-12 rounded-full bg-accent text-black flex items-center justify-center shadow-lg hover:shadow-xl hover:scale-110 transition-all duration-300 z-40 ${
|
|
isVisible ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
|
|
}`}
|
|
aria-label="Scroll to top"
|
|
title="Scroll to top"
|
|
>
|
|
<ArrowUp size={20} strokeWidth={3} />
|
|
</button>
|
|
)
|
|
}
|