37 lines
1.0 KiB
Svelte
37 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
|
|
let showButton = false;
|
|
const scrollThreshold = 300;
|
|
|
|
function handleScroll() {
|
|
showButton = (window.scrollY || document.documentElement.scrollTop) > scrollThreshold;
|
|
}
|
|
|
|
onMount(() => {
|
|
handleScroll();
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
});
|
|
|
|
function scrollToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
class={`fixed bottom-8 right-8 z-50 flex h-12 w-12 items-center justify-center rounded-full border border-[var(--border-color)] bg-[var(--header-bg)] text-[var(--text-secondary)] shadow-lg transition-all hover:border-[var(--primary)] hover:text-[var(--primary)] ${
|
|
showButton ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-4 opacity-0'
|
|
}`}
|
|
aria-label="Back to top"
|
|
on:click={scrollToTop}
|
|
>
|
|
<i class="fas fa-chevron-up"></i>
|
|
</button>
|