Screen jumps when scrolled down

[Siroguh]

When a link is down in the page or your nav is sticky and you click on the link, the page's scroll always jumps to top before making the transition. It's a shame, but I haven't found any fix using the {key} approach to transition between pages.

There are multiple issue reports on the sveltekit GitHub, but sadly no fix. Developers have taken notice though.

[evanwinter]

Yeah, you're correct. One way to get around this (which definitely might have other implications, depending on the rest of your app) is to add a wrapper like this:

<div style="height: 100vh; overflow-y: auto;">
  <PageTransition>
    <slot />
  </PageTransition>
</div>

It seems like SvelteKit jumps to the top of the document — but if the scroll position is not actually on the root document, but rather inside that scrolling container, it can handle it just fine.

That's not to say this is a great solution, but it does work.