Scroll back up when navigating?

[kevinrenskers]

If I have a link (just an a using use:link for example) somewhere at the bottom of a long page, and press it to navigate to another route, that new page is also scrolled down instead of it starting from the top. How can I workaround this behavior?

[Rysakov1986]

<!-- MyRouteComponent.svelte -->
<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.scrollTo(0, 0);
  });
</script>

[kevinrenskers]

That works, but I am wondering if this wouldn't be nicer to add to the router instead of copying this to every component?

[null-dev]

I'm interested in this too, but at a more advanced level, can you add something that will restore the last scroll position when navigating backwards?

[idChef]

I'm interested in this too, but at a more advanced level, can you add something that will restore the last scroll position when navigating backwards?

@null-dev I think it is the default behaviour of the browser. It restores the last scroll position when navigating backwards for me (both mobile and desktop)

[null-dev]

@idChef Hmm just did some testing and it looks like the browser does do this but at a very basic level. E.g. It doesn't work when the user has scrolled anything other than the root window and it doesn't work when the page needs to re-load/re-fetch data because state was lost upon navigation. All this looks fixable though by just restoring state when navigating back, so I guess it doesn't really matter. Thanks!

[EmilTholin]

Hi @kevinrenskers!

The new page should not be scrolled down to the same position, granted that the URL is changed and it actually is a new route. Do you have a minimal reproducible example that we could ideally just clone and try?

Like @null-dev said, the issue of caching data so that routes are rendered directly when navigating back to restore the scroll position properly is sadly outside the scope of this router and is most likely best handled by some sort of global Svelte store.

[jondcoleman]

I'm facing this issue too.

I forked the project and modified the example folder to illustrate: https://github.com/jondcoleman/svelte-routing-scroll-position-test

Here's the behavior, recorded: https://www.screencast.com/t/sOVH8w6kmB

[kevinrenskers]

I was trying to find the time to build a small repro project, super great that you were able to do so!

[jimmywarting]

my solution in meanwhile:

history.pushState = new Proxy(history.pushState, {
  apply (target, thisArg, argumentsList) {
    // scrollTo(0, 0) <-- order of operation can mather (ty, @t-lock)
    Reflect.apply(target, thisArg, argumentsList)
    scrollTo(0, 0)
  }
})

[VanshCodes]

@jimmywarting Where should i insert it in my project. Can you provide an example project on github for this

[jimmywarting]

@VanshCodes you can put it anywhere in your code where it gets executed once on pageload

[t-lock]

@jimmywarting epic solution -- but it runs before navigation, meaning the "back" button loses its scroll position.

However, just putting the scrollTo after the reflect, does the trick! :ok_hand:

 history.pushState = new Proxy(history.pushState, {
   apply (target, thisArg, argumentsList) {
     Reflect.apply(target, thisArg, argumentsList);
     scrollTo(0,0);
   }
 });

[jimmywarting]

lol, yea, silly mistake, reflect should maybe be executed first 😅 will update my code example

[jeremybradbury]

@jimmywarting TYVM

@t-lock TYVM, I made your code into a js file

jimmywarting_tlock.js

    history.pushState = new Proxy(history.pushState, {
      apply(target, thisArg, argumentsList) {
        Reflect.apply(target, thisArg, argumentsList);
        scrollTo(0, 0);
      },
    });

that I simply import into my public/index.html file

[krishnaTORQUE]

This issue has been solved in version 1.8.9 Thanks