diff --git a/web/components/scroll-to-top-button.tsx b/web/components/scroll-to-top-button.tsx
index 0be44fe4..18eb525c 100644
--- a/web/components/scroll-to-top-button.tsx
+++ b/web/components/scroll-to-top-button.tsx
@@ -7,15 +7,14 @@ export function ScrollToTopButton(props: { className?: string }) {
   const { className } = props
   const [visible, setVisible] = useState(false)
 
-  const onScroll = () => {
-    if (window.scrollY > 500) {
-      setVisible(true)
-    } else {
-      setVisible(false)
-    }
-  }
-
   useEffect(() => {
+    const onScroll = () => {
+      if (window.scrollY > 500) {
+        setVisible(true)
+      } else {
+        setVisible(false)
+      }
+    }
     window.addEventListener('scroll', onScroll, { passive: true })
 
     return () => {