From bb5dd838bcdd548c7da36b6b9cdff35fc4f8bd19 Mon Sep 17 00:00:00 2001
From: Ewan Croft <git@ewancroft.uk>
Date: Sun, 7 Sep 2025 11:45:26 +0100
Subject: [PATCH] feat: add scroll-to-top button in bottom left corner

---
 .../components/layout/main/ScrollToTop.svelte | 118 ++++++++++++++++++
 src/lib/components/layout/main/index.ts       |   3 +-
 src/routes/+layout.svelte                     |   6 +-
 3 files changed, 125 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/layout/main/ScrollToTop.svelte

diff --git a/src/lib/components/layout/main/ScrollToTop.svelte b/src/lib/components/layout/main/ScrollToTop.svelte
new file mode 100644
index 0000000..fa18d3e
--- /dev/null
+++ b/src/lib/components/layout/main/ScrollToTop.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let isVisible = false;
+  let scrollY = 0;
+
+  // Show button after scrolling down 300px
+  $: isVisible = scrollY > 300;
+
+  function scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      scrollToTop();
+    }
+  }
+
+  onMount(() => {
+    const updateScrollY = () => scrollY = window.scrollY;
+    window.addEventListener('scroll', updateScrollY, { passive: true });
+    
+    return () => {
+      window.removeEventListener('scroll', updateScrollY);
+    };
+  });
+</script>
+
+<svelte:window bind:scrollY />
+
+{#if isVisible}
+  <button
+    class="scroll-to-top"
+    on:click={scrollToTop}
+    on:keydown={handleKeydown}
+    aria-label="Scroll to top"
+    title="Scroll to top"
+  >
+    <!-- Chevron Up SVG icon -->
+    <svg 
+      width="20" 
+      height="20" 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      stroke-width="2" 
+      stroke-linecap="round" 
+      stroke-linejoin="round"
+    >
+      <path d="m18 15-6-6-6 6"/>
+    </svg>
+  </button>
+{/if}
+
+<style>
+  .scroll-to-top {
+    position: fixed;
+    bottom: 2rem;
+    left: 2rem;
+    z-index: 50;
+    width: 3rem;
+    height: 3rem;
+    border: none;
+    border-radius: 50%;
+    background-color: var(--card-bg);
+    color: var(--text-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--button-bg);
+  }
+
+  .scroll-to-top:hover {
+    background-color: var(--button-hover-bg);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
+  }
+
+  .scroll-to-top:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .scroll-to-top:focus {
+    outline: 2px solid var(--link-color);
+    outline-offset: 2px;
+  }
+
+  /* Mobile adjustments */
+  @media (max-width: 640px) {
+    .scroll-to-top {
+      bottom: 1.5rem;
+      left: 1.5rem;
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .scroll-to-top {
+      transition: none;
+    }
+    
+    .scroll-to-top:hover {
+      transform: none;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/layout/main/index.ts b/src/lib/components/layout/main/index.ts
index abc178b..3fa71bf 100644
--- a/src/lib/components/layout/main/index.ts
+++ b/src/lib/components/layout/main/index.ts
@@ -1,2 +1,3 @@
 export { default as DynamicLinks } from "./DynamicLinks.svelte";
-export { default as LatestBlogPost } from "./LatestBlogPost.svelte";
\ No newline at end of file
+export { default as LatestBlogPost } from "./LatestBlogPost.svelte";
+export { default as ScrollToTop } from "./ScrollToTop.svelte";
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3195acb..7b112eb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
   const { page } = getStores();
   import Profile from "$components/profile/Profile.svelte";
   import { Footer, HeaderMain } from "$components/layout";
+  import { ScrollToTop } from "$components/layout/main";
   import { NoScriptMessage } from "$components/shared";
   import { measurePerformance, logPerformanceMetrics } from "$utils/performance";
 
@@ -48,4 +49,7 @@
   {@render children()}
 
   <Footer profile={data.profile} siteInfo={data.siteInfo} posts={data.posts} />
-</div>
\ No newline at end of file
+</div>
+
+<!-- Scroll to top button -->
+<ScrollToTop />
\ No newline at end of file
-- 
2.51.2