scroll top button now uses #top instead of custom javascript

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>