How to set ScrollToTop Button to be active on viewport height?

July 12, 2022

At the moment i am using hardcoded height point to trigger visible ScrollToTop Button.
i would love to get solution to be triggered when passing viewport height.

  const { scrollDirection } = useScrollDirection()
  const { scrollPosition } = useScrollPosition()
  const [isVisible, setIsVisible] = useState(false)
  const toggleVisible = () => {
    if (scrollPosition === 0) {
      setIsVisible(false)
    }
    **if (scrollPosition > 800) {
      setIsVisible(true)
    } else if (scrollPosition <= 799) {
      setIsVisible(false)
    }**
  }
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }
  window.addEventListener("scroll", toggleVisible)

>Solution :

you can use window.innerHeight

const toggleVisible = () => {
    const viewportHeight = window.innerHeight;
    if (scrollPosition === 0) {
        setIsVisible(false)
    }
    **if (scrollPosition > viewportHeight) {
        setIsVisible(true)
    } else if (scrollPosition <= viewportHeight) {
        setIsVisible(false)
    }**
}