Answers for "how to hide button after scrolling to top in react"

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>
  )
}