diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 1c660f572..144581bff 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -123,6 +123,21 @@
 			history.pushState({}, '', `?${q}`);
 		}
 	}
+
+	/** @type {HTMLElement} */
+	let sidebar;
+
+	/** @type {import('./$types').Snapshot<number>} */
+	export const snapshot = {
+		capture: () => {
+			const scroll = sidebar.scrollTop;
+			sidebar.scrollTop = 0;
+			return scroll;
+		},
+		restore: (scroll) => {
+			sidebar.scrollTop = scroll;
+		}
+	};
 </script>
 
 <svelte:head>
@@ -164,6 +179,7 @@
 		<SplitPane id="main" type="horizontal" min="360px" max="50%" pos="33%">
 			<section slot="a" class="content">
 				<Sidebar
+					bind:sidebar
 					index={data.index}
 					exercise={data.exercise}
 					on:select={(e) => {
diff --git a/src/routes/tutorial/[slug]/Sidebar.svelte b/src/routes/tutorial/[slug]/Sidebar.svelte
index 9c16fb68d..63fbb2838 100644
--- a/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { createEventDispatcher } from 'svelte';
-	import { afterNavigate } from '$app/navigation';
 	import Modal from '$lib/components/Modal.svelte';
 	import Menu from './Menu.svelte';
 
@@ -10,22 +9,15 @@
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
 
+	/** @type {HTMLElement} */
+	export let sidebar;
+
 	const dispatch = createEventDispatcher();
 
 	const namespace = 'learn.svelte.dev';
 	const copy_enabled = `${namespace}:copy_enabled`;
 
-	/** @type {HTMLElement} */
-	let sidebar;
-
 	let show_modal = false;
-
-	afterNavigate(async () => {
-		// TODO ideally we would associate scroll state with
-		// history. That's a little tricky to do right now,
-		// so for now just always reset sidebar scroll
-		sidebar.scrollTop = 0;
-	});
 </script>
 
 <Menu {index} current={exercise} />