Scroll to top on page view

[thescooble]

I have a fixed header and when I click on a link that has swup enabled, the animation works fine, but it doesnt scroll to top of the screen for the page I linked to.
I tried doing the "known issue fix" by adding a div element "

", adding the CSS that offset the element by -200px as well as appended the div id (#need-to-scroll-here) to the referring URL, but is still doesn't scroll to the top.
How do I get it to scroll to the top?

[daun]

Update: swup 4 now comes with scroll support out of the box.

The below applies to swup 3:

You could either use the swup scroll plugin that will scroll back to the top after each transition, or you could implement a very simple non-animated version of it yourself:

swup.on('contentReplaced', () => window.scrollTo(0, 0))

Keep in mind this won't handle special cases like browser history visits or links with #hashes.

[THRY]

Is it possible to disable animated scrolling completly? i think its strange in which order the transition is working.

Swup fades the page out, then fades the new page in and only after then scrolls to top of the page.

For me it would make sense that the page scrolls up to top before the new content fades in. Is this possible? I did not find anything in the docs or the discussions.

[daun]

@THRY The official Scroll Plugin allows customizing the order: it can be configured to start scrolling up to the top while the new page is loading/transitioning.