added scroll to top button to all pages
This commit is contained in:
34
src/lib/components/scroll-top-button.svelte
Normal file
34
src/lib/components/scroll-top-button.svelte
Normal file
@@ -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>
|
||||
@@ -1,8 +1,11 @@
|
||||
<script lang="ts">
|
||||
import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="main-content">
|
||||
<ScrollTopButton />
|
||||
{@render children()}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user