Merge pull request #36 from Ralf-Pauli/feat/scroll-to-top

feat: scroll to top button

src/lib/components/ScrollToTop.svelte

@@ -0,0 +1,33 @@
+<script>
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";
+  import { ArrowUp } from "lucide-svelte";
+
+  let showButton = false;
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+
+  function handleScroll() {
+    const scrollY = window.scrollY ?? document.documentElement.scrollTop;
+    showButton = scrollY > 100;
+  }
+
+  onMount(() => {
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  });
+</script>
+
+{#if showButton}
+  <button
+    on:click={scrollToTop}
+    transition:fade
+    class="fixed bottom-5 right-5 bg-primary text-primary-foreground rounded-full p-3 shadow-lg hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+    aria-label="Scroll to top">
+    <ArrowUp class="h-6 w-6" />
+  </button>
+{/if}

src/routes/+layout.svelte

@@ -4,11 +4,14 @@
   import Navbar from "$components/navbar/Navbar.svelte";
   import Footer from "$components/footer/Footer.svelte";
 
+  import ScrollToTop from "$components/ScrollToTop.svelte";
+
   export let data: LayoutData;
 </script>
 
 <div class="h-screen px-3">
   <Navbar />
   <slot />
   <Footer />
+  <ScrollToTop />
 </div>