From 1d9eaa5bddc399b831f593377abadc7a670df485 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Wed, 15 Apr 2026 16:36:54 +0200
Subject: [PATCH] scroll top button now uses #top instead of custom javascript

---
 src/lib/components/scroll-top-button.svelte | 40 +++++++++++++--------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/scroll-top-button.svelte b/src/lib/components/scroll-top-button.svelte
index 42d9e55..3d26aec 100644
--- a/src/lib/components/scroll-top-button.svelte
+++ b/src/lib/components/scroll-top-button.svelte
@@ -1,34 +1,44 @@
 <script lang="ts">
     let y: number;
-
-    // TODO change out for <a href="#top"/>
-    function scrollToTop() {
-        document.documentElement.scrollTop = 0;
-    }
 </script>
 
 <svelte:window bind:scrollY={y} />
 
-{#if y > 2400}
-    <button class="scroll-top-button blurred-background" onclick={scrollToTop}>↑</button>
-{/if}
+<a
+    href="#top"
+    class="
+        scroll-top-button
+        blurred-background
+        {y > 2400 ? "scroll-top-button-visible" : ""}
+    "
+>↑</a>
 
 <style>
     .scroll-top-button {
         position: fixed;
         bottom: 24px;
         right: 48px;
-        font-size: 1.4rem;
+        font-size: 1.6rem;
+        font-weight: 700;
         cursor: pointer;
-        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
-        color: var(--color-highlight);
-        background-color: var(--color-background-highlight);
-        padding: 12px;
-        transition: background-color var(--duration-animation) var(--anim-curve);
+        border-radius: var(--border-radius);
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        color: var(--color-text);
+        background-color: var(--color-background-highlight-alt);
+        padding: 14px 22px;
+        transition: background-color var(--duration-animation) var(--anim-curve),
+                    opacity var(--duration-animation) var(--anim-curve);
         z-index: 10;
+        opacity: 0;
+        text-decoration: none;
     }
 
     .scroll-top-button:hover {
-        background-color: var(--color-background-highlight-hover);
+        background-color: var(--color-background-highlight-hover-alt);
+    }
+
+    .scroll-top-button-visible {
+        opacity: 1;
     }
 </style>
\ No newline at end of file