From ae14b2b4ca9101766f43e1740c1813831c674c4e Mon Sep 17 00:00:00 2001
From: Michael Krebs <michikrbs@gmail.com>
Date: Fri, 4 Oct 2024 19:41:58 +0200
Subject: [PATCH] feat: scroll to top button

---
 src/lib/components/ScrollToTop.svelte | 33 +++++++++++++++++++++++++++
 src/routes/+layout.svelte             |  3 +++
 2 files changed, 36 insertions(+)
 create mode 100644 src/lib/components/ScrollToTop.svelte

diff --git a/src/lib/components/ScrollToTop.svelte b/src/lib/components/ScrollToTop.svelte
new file mode 100644
index 0000000..c47965f
--- /dev/null
+++ b/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}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2a268d4..54ee8b7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,6 +4,8 @@
   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>
 
@@ -11,4 +13,5 @@
   <Navbar />
   <slot />
   <Footer />
+  <ScrollToTop />
 </div>