how to hide button after scrolling to top in react

Solutions on MaxInterview for how to hide button after scrolling to top in react by the best coders in the world

we are a community of more than 2 million smartest coders
registration for
employee referral programs
are now open
get referred to google, amazon, flipkart and more
register now
  
pinned-register now
showing results for - "how to hide button after scrolling to top in react"
Misha
13 Aug 2017
1function FunctionalComponent() {
2const hasWindow = typeof window !== 'undefined'
3const [opacity, setOpacity] = useState(1)
4
5function handleElementsOnScroll() {
6    window.onscroll = () => {
7      let currentScrollPos = window.pageYOffset
8
9      if (currentScrollPos > 600) {
10        setOpacity(1)
11      } else {
12        setOpacity(0)
13      }
14    }
15  }
16
17  useEffect(() => {
18    if (hasWindow) {
19      handleElementsOnScroll()
20    }
21  }, [hasWindow])
22
23    return (
24        <button
25          className="top-scroll"
26          style={{ opacity }}
27        >
28          <i className="fa fa-arrow-up"></i>
29        </button>
30  )
31}