feat: add smooth scroll behavior, except on page change

This commit is contained in:
Youwen Wu 2024-04-06 00:47:28 -07:00
parent 9485a61226
commit 51d7318942
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
2 changed files with 21 additions and 0 deletions

View file

@ -74,6 +74,9 @@
* { * {
@apply border-border; @apply border-border;
} }
html.smoothscroll {
scroll-behavior: smooth;
}
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
font-family: font-family:

View file

@ -8,6 +8,24 @@
import '@fontsource/merriweather/latin.css'; import '@fontsource/merriweather/latin.css';
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import { Toaster } from '$lib/components/ui/sonner'; 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> </script>
<Toaster /> <Toaster />