Maintain Scroll Position on Page Change in Svelte

- 1 minute read

In the below SvelteKit component, when the “Go Home” button is clicked, the page will go to / while preserving the user’s current scroll position:

    import { goto } from '$app/navigation';

    const preserveScroll = (url) => {
        goto(url, {
            noscroll: true,

<button on:click={() => preserveScroll(`/`)}>
    Go Home

Just import the goto function from SvelteKit’s built-in $app/navigation library, and set noscroll to true via the optional object parameter. By default, noscroll is false.

Link to this section Conclusion

That’s all! There are other ways to go about doing redirecting while preserving scroll position, but this is perhaps the most “Svelte-native” approach.