Reset scroll position when navigating to a new page

[liquiddandruff]

First of all, thanks for this awesome static route lib :)

I'm wondering if there's a cleaner way than window.scrollTo(0,0) when navigating to a new page from a page that has been scrolled even a tiny bit down? Since if I don't do this, the new page will be shown with the previous scroll position.

Am I missing anything or is this the right way to do it? Cheers.

edit: Did a quick search but forgot to remove filters. Seems like others are also doing the scroll resetting manually #26

[ItalyPaleAle]

See also #26

Yes that is probably the best way. The router will not do that for you as we cannot make assumptions about your app.

[liquiddandruff]

Thank you!

[liquiddandruff]

From some experimenting, this quickfix works great for forward navigations but it breaks history and back navigation (since navigating backwards will run that page's onMount). I believe the cleanest implementation would need routing library support to restore stored positions on back navigation. See the same discussion with angular's route: angular/angular#7791 and angular/angular#6946.

The defaults they later decided on preserves scroll position on back navigation and scroll to top on forward navigation (which is a sensible default for a routing library since it matches the default behaviour of browsers).

I'm about to try something similar as their implementation https://github.com/angular/angular/pull/20030/files . Will update if I get anywhere.

[ItalyPaleAle]

The problem with that approach is that it would be quite hard to implement here.

The router has no concept of history stack, and it can’t have, so there’s no way we can know if this is a forward navigation or backwards. We could maintain a stack of all visited pages in memory, but even there we wouldn’t be able to know if the navigation is forward or backward (eg page that links back to the previous page as a forward navigation). It also wouldn’t survive a refresh of the page.

If this is something that’s very important to you, it should be implementable in the app layer. The new “routeLoaded” event introduced in 1.3 should make this easier too, as it doesn’t require creating an on amount in every component.

[liquiddandruff]

Feel free to take a look, small changes. This works great for my use case (still haven't handled push, pop, replace yet, probably will once I need it).

Tried to make things semi-releasable, at very least others might find this useful.

Some things to look at would be to somehow make back navigation not flash if there's lots of content to load (maybe fade the page in etc).

[frederikhors]

@ItalyPaleAle, I understand what you say about few features that work good.

Your hint to use the new routeLoaded is great and I'm using it right now.

But is a bit DRY if used in many <Router> components in my app.

Look here: https://github.com/vikignt/svelte-ui/blob/master/example/src/main.js#L25-L30.
They use page.js and forEach route they have a func().
Maybe an idea?

[frederikhors]

I'm sorry, I'm wrong.

Your routeLoaded works for every underlying route. My fault.

[frederikhors]

But perhaps, now that I think about it, this is another the problem.

How to use it only for some <Router> components?

[frederikhors]

#57