src/lib/components/GoTop.svelte

<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' });
  }

  // WIP display only if scroll > 0 dynamically
  $: visible = browser ? (document?.getElementById('app') as HTMLElement)?.scrollTop > 0 : false;
</script>

<button
  class="rounded-full h-12 w-12 bg-white shadow-lg brightness-90 transition-all duration-200 hover:brightness-110 fixed bottom-8 right-8 flex items-center justify-center text-indigo-500 z-10"
  class:opacity-0={!visible}
  class:pointer-events-none={!visible}
  on:click={goTop}
>
  <Icon icon="foundation:arrow-up" class="w-8 h-8" />
</button>