feat: ✨ add back to top

Author: spences10

src/routes/+page.md

@@ -24,6 +24,7 @@
 	import { Head } from 'svead'
 	import { onMount } from 'svelte'
 	import { writable } from 'svelte/store'
+  import BackToTop from './back-to-top.svelte'
 
 	// Head variables
 	let title = 'This is SvelteKit embed'
@@ -69,6 +70,8 @@
 
 <!-- cSpell:ignore yyoood,Zokm,Zrzbx -->
 
+<BackToTop />
+
 # SvelteKit Embed
 
 This is a collection of embed components I use on a regular basis

src/routes/back-to-top.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition'
+
+	let showScrollButton = false
+
+	function scrollToTop() {
+		window.scrollTo({
+			top: 0,
+			behavior: 'smooth',
+		})
+	}
+
+	function handleScroll() {
+		showScrollButton = window.pageYOffset > 0
+	}
+</script>
+
+<svelte:window on:scroll={handleScroll} />
+
+{#if showScrollButton}
+	<button
+		on:click={scrollToTop}
+		transition:fly={{ y: 200, duration: 300 }}
+		class="fixed bottom-8 right-8 btn btn-primary normal-case"
+	>
+		Back to top
+	</button>
+{/if}