<script lang="ts"> import { browser } from "$app/environment"; import Icon from "@iconify/svelte"; const goTop = () => { const element = document.getElementById('app'); element?.scrollTo({ top: 0, behavior: 'smooth' }); } let visible = false; if (browser) { const element = document.getElementById('app'); element?.addEventListener('scroll', () => { const scroll = element?.scrollTop ?? 0; visible = scroll > 100; }); } </script> <button class="rounded-full text-sm text-neutral-950 font-semibold px-3 py-1 bg-white shadow-lg brightness-90 transition-all duration-200 hover:brightness-110 fixed bottom-8 right-8 flex items-center gap-1.5 justify-center z-10" class:opacity-0={!visible} class:pointer-events-none={!visible} on:click={goTop} > <Icon icon="foundation:arrow-up" class="w-4 h-4" /> Go back to top </button>