added scroll to top button to all pages

2026-02-27 23:49:25 +01:00
parent 76296359ae
commit 2a965e42a8
2 changed files with 37 additions and 0 deletions
--- a/src/lib/components/scroll-top-button.svelte
+++ b/src/lib/components/scroll-top-button.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    let y: number;
+
+    function scrollToTop() {
+        document.documentElement.scrollTop = 0;
+    }
+</script>
+
+<svelte:window bind:scrollY={y} />
+
+{#if y > 2400}
+    <button class="scroll-top-button" onclick={scrollToTop}>↑</button>
+{/if}
+
+<style>
+    .scroll-top-button {
+        position: fixed;
+        bottom: 24px;
+        right: 48px;
+        font-size: 1.4rem;
+        cursor: pointer;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
+        color: var(--color-highlight);
+        background-color: var(--color-background-highlight);
+        backdrop-filter: blur(var(--blur-radius-background));
+        padding: 12px;
+        transition: background-color var(--duration-animation) ease-out;
+        z-index: 10;
+    }
+
+    .scroll-top-button:hover {
+        background-color: var(--color-background-highlight-hover);
+    }
+</style>