Scroll back up when navigating?

This issue has been tracked since 2020-04-17.

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 wrote this answer on 2020-04-17
<!-- MyRouteComponent.svelte -->
<script>
  import { onMount } from "svelte";

  onMount(() => {
    window.scrollTo(0, 0);
  });
</script>
kevinrenskers wrote this answer on 2020-04-18

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 wrote this answer on 2020-05-04

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 wrote this answer on 2020-05-12

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 wrote this answer on 2020-05-12

@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 wrote this answer on 2020-05-19

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 wrote this answer on 2020-05-31

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 wrote this answer on 2020-05-31

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

jimmywarting wrote this answer on 2020-06-20
15

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 wrote this answer on 2021-09-24

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

jimmywarting wrote this answer on 2021-09-24

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

t-lock wrote this answer on 2021-10-01

@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! 👌

 history.pushState = new Proxy(history.pushState, {
   apply (target, thisArg, argumentsList) {
     Reflect.apply(target, thisArg, argumentsList);
     scrollTo(0,0);
   }
 });
jimmywarting wrote this answer on 2021-10-01

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

jeremybradbury wrote this answer on 2022-02-28

@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

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date