pages/src/lib/components/scroll-top-button.svelte

<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) var(--anim-curve);
        z-index: 10;
    }

    .scroll-top-button:hover {
        background-color: var(--color-background-highlight-hover);
    }
</style>