scroll

src/components/ScrollToTop.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export default function ScrollToTop() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 400)
+    window.addEventListener('scroll', onScroll)
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  if (!visible) return null
+
+  return (
+    <button
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-foreground/10 border border-foreground/10 text-foreground/60 hover:bg-foreground/20 hover:text-foreground backdrop-blur-sm transition-all"
+      aria-label="Scroll to top"
+    >
+      <i className="ti ti-arrow-up text-sm" aria-hidden="true" />
+    </button>
+  )
+}