Maintain Scroll Position on Page Change in Svelte

December 3, 2021 - 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:

<script>
    import { goto } from '$app/navigation';

    const preserveScroll = (url) => {
        goto(url, {
            noscroll: true,
        });
    };
</script>

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

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.

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.

Link to this section Conclusion

Conclusion