Add scroll to top button

src/components/ScrollToTop.astro

@@ -0,0 +1,32 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
+<button
+  id="scroll-to-top"
+  aria-label="Scroll to top"
+  class="fixed bottom-6 right-6 z-50 flex items-center justify-center w-10 h-10 rounded-full bg-accent text-white shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-accent-hover cursor-pointer"
+>
+  <Icon name="fa6-solid:arrow-up" class="w-5 h-5" />
+</button>
+
+<script>
+  const btn = document.getElementById("scroll-to-top");
+  if (!btn) throw new Error("ScrollToTop button not found");
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      btn.classList.remove("opacity-0", "invisible");
+      btn.classList.add("opacity-100", "visible");
+    } else {
+      btn.classList.add("opacity-0", "invisible");
+      btn.classList.remove("opacity-100", "visible");
+    }
+  };
+
+  window.addEventListener("scroll", toggleVisibility, { passive: true });
+
+  btn.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+</script>