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">
|
<script lang="ts">
|
||||||
|
import ScrollTopButton from "$lib/components/scroll-top-button.svelte";
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
|
<ScrollTopButton />
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user