how to hide button after scrolling to top in react
function FunctionalComponent() {
const hasWindow = typeof window !== 'undefined'
const [opacity, setOpacity] = useState(1)
function handleElementsOnScroll() {
window.onscroll = () => {
let currentScrollPos = window.pageYOffset
if (currentScrollPos > 600) {
setOpacity(1)
} else {
setOpacity(0)
}
}
}
useEffect(() => {
if (hasWindow) {
handleElementsOnScroll()
}
}, [hasWindow])
return (
<button
className="top-scroll"
style={{ opacity }}
>
<i className="fa fa-arrow-up"></i>
</button>
)
}