From 51d7318942ae3785a7a244ca1a1f6fd42b7137f9 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 6 Apr 2024 00:47:28 -0700
Subject: [PATCH] feat: add smooth scroll behavior, except on page change

---
 src/lib/app.pcss          |  3 +++
 src/routes/+layout.svelte | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/lib/app.pcss b/src/lib/app.pcss
index 90a3cfc..ab32552 100644
--- a/src/lib/app.pcss
+++ b/src/lib/app.pcss
@@ -74,6 +74,9 @@
 	* {
 		@apply border-border;
 	}
+	html.smoothscroll {
+		scroll-behavior: smooth;
+	}
 	body {
 		@apply bg-background text-foreground;
 		font-family:
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ce217b3..5c85e36 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,6 +8,24 @@
 	import '@fontsource/merriweather/latin.css';
 	import Footer from '$lib/components/Footer.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
+	import { onMount } from 'svelte';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+
+	let root: HTMLElement | null;
+
+	onMount(() => {
+		root = document.getElementsByTagName('html')[0];
+
+		root?.classList.add('smoothscroll');
+	});
+
+	beforeNavigate(() => {
+		root?.classList.remove('smoothscroll');
+	});
+
+	afterNavigate(() => {
+		root?.classList.add('smoothscroll');
+	});
 </script>
 
 <Toaster />