cocinado boton para volver arriba

src/lib/components/MostrarVolver.svelte.ts

@@ -0,0 +1,16 @@
+export class MostrarVolver {
+	scrollY = $state(0);
+	value = $derived(this.scrollY > 500);
+
+	constructor() {
+		if (typeof window !== 'undefined') {
+			$effect(() => {
+				const handleScroll = () => {
+					this.scrollY = window.scrollY;
+				};
+				window.addEventListener('scroll', handleScroll);
+				return () => window.removeEventListener('scroll', handleScroll);
+			});
+		}
+	}
+}

src/lib/components/VolverArriba.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { fade, scale } from 'svelte/transition';
+	import Button from './ui/button/button.svelte';
+	import { MostrarVolver } from './MostrarVolver.svelte';
+	import ArrowUp from '@lucide/svelte/icons/arrow-up';
+
+	let mostrarVolver = new MostrarVolver();
+</script>
+
+{#if mostrarVolver.value}
+	<div transition:fade>
+		<div class="fixed right-9 bottom-12 flex flex-col gap-2" transition:scale>
+			<Button
+				onclick={() => {
+					window.scrollTo({
+						top: 0,
+						behavior: 'smooth'
+					});
+				}}
+				class="align-middle"
+			>
+				Volver
+				<ArrowUp />
+			</Button>
+		</div>
+	</div>
+{/if}

src/routes/post/[idpost]/+page.svelte

@@ -16,7 +16,6 @@
 	import { sesionStore } from '@/stores/usuario';
 	import { likePost } from '@/hooks/likePost';
 	import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
-	import { TamañoPantalla } from './TamañoPantalla.svelte';
 	import BotonSeguir from '@/components/BotonSeguir.svelte';
 	import Pen from '@lucide/svelte/icons/pen';
 	import Trash_2 from '@lucide/svelte/icons/trash-2';
@@ -26,6 +25,7 @@
 	import { deletePost } from '@/hooks/deletePost';
 	import { flip } from 'svelte/animate';
 	import { obtenerRespuestasPorId } from '@/hooks/obtenerRespuestasPorId';
+	import VolverArriba from '@/components/VolverArriba.svelte';
 
 	interface Prop {
 		data: {
@@ -34,8 +34,6 @@
 		};
 	}
 
-	let tamaño = new TamañoPantalla();
-
 	let { data }: Prop = $props();
 
 	let respuestasPaginadas: Post[] = $state([]);
@@ -154,6 +152,8 @@
 	</div>
 {/if}
 
+<VolverArriba />
+
 {#snippet Respuesta(post: Post)}
 	<div class="ml-2 flex-1">
 		<div class="flex justify-between">