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

  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>