Anchor linking and scroll position after refresh not working

[staus]

Currently it seems the natural Sapper behaviour when you refresh a page is to jump to the top. I'm guessing this is because the dom doesn't exist initially so there is no dom to be scrolled down to.

Even more so I'm concerned this impacts direct linking to anchor links on a page as they neither seem to work naturally. I could check the url hash and do the scroll in code, but I'm concerned it might still hurt SEO score.

To replicate the issue, simply get the Sapper boilerplate and add a bunch of content so the page overflows

Unless I'm missing something I'd consider this a pretty big issue with sapper.

[marcfilleul]

Same here, keeping the scroll position when refreshig a page is very important in a website.

When changing route then going back to previous route with browser back button, the scroll position is correctly kept.
But not when refreshing a page.

How can we keep scroll position when refreshing ?

[antony]

Just realised this is still an issue - anchor links just don't work as part of an "a" tag.

From a "refresh" point of view, it's clear - Sapper stores the scroll_positions in memory, so if you refresh the browser, the application reloads and the value is reset.

It would be good to understand the technical reasons why this doesn't work if you click an 'a' tag on a different page though. My content is very much static, stored inside a const variable in the page, so it is rendered on the server-side. This means that the position of the anchor tag would be known before the page renders in the browser.

How do other frameworks handle this? Nuxt? Next?

[marcfilleul]

Thanks for the info.

Is there an easy way to store the scroll position in local storage for example, or anywhere it wouldn't reset at refresh ?

[antony]

Since Sapper is essentially serving an SPA, a refresh is "out of bounds" for its concern. The only reason a user should be refreshing is if the application broke or similar, so I can't see this scenario being handled/being a concern of Sapper.

[marcfilleul]

In my point of vue (maybe it won't be accurate as I'm relatively new to modern javascript and frameworks), Svelte is serving SPA and Sapper is here to handle SEO and multiples routes, which is required for websites.

When I'm on a website, I quite often refresh the page when a lazy loaded image fails to appear for example.
Or as a web developer, to test my lazy loading or other animations.

Going back to top when refreshing a page in a website is bad in a UX perspective.

So I would argue it should be a concern for Sapper, as it was for Nuxt which handles scroll position correctly 😉

To sum up, if I wanted to make an app, I would use Svelte and wouldn't care about scroll position.
But Sapper is the tool we need to make modern websites and we should be able to save scroll position on refresh in this case.

[staus]

Thanks for the info @antony . I get what you're saying, but let's say I'm building a large site for a newspaper with a cms. There will be hundreds of articles and maybe I leave a bit of leeway for the editors to do some creative stuff, like allowing canvas elements where they could hire a creative developer to build something. It could then be that this developer forgot to listen for window resize to update the content of the webgl canvas and now the page looks weird for the user, which is why a refresh would fix it.

Though we strive for perfection, the story above is quite common down the road of any live project.

Simply put, the regular web allows for refresh without scrolling to the top, so so should our pages, I think :)

[marcfilleul]

Still no news about that 😢.

Session or Local Storage could help with scroll position.

Here is a temporary fix someone used when Nuxt wasn't saving scroll position, maybe it could work in Sapper too:

At this moment, I'm just using the following in layouts/default.vue (since all my pages use it):
mounted() { if (process.client && window) { window.history.scrollRestoration = 'auto'; } },

[swyxio]

for anyone reading, the anchor tag issue is actually a different issue because sapper sets the baseurl tag. search this repo for baseurl related issues

[jerriclynsjohn]

When designing a website, everytime I make changes to CSS the whole website resets and scrolls to the top. This is such a bummer during development, breaks the flow of UI dev. This is also such a bummer for static sites generated using sapper, scroll position has to be saved / there should be an option to enable that.

[Conduitry]

This should be fixed now in 0.27.13.

[ryanditjia]

Doesn’t work in Safari for some reason (tried on Safari 13.1 for macOS Catalina).

[niklasgrewe]

@Conduitry it also doesn't work for me (tried in Chrome 83 and Safari 13.5) when using normal <a href="/test"> tags to navigate around. The scroll position is currently not restored.

@marcfilleul i tried your code in _layout.svelte but it doesn't do anything...

[benmccann]

@niklasgrewe this issue is about anchor tag targets. E.g. you can click https://sapper.svelte.dev/docs#Error_page and it will take you down the page to the appropriate section

[niklasgrewe]

@benmccann oh sorry, ok all right. Then should I create a new issue in this repo for my case (restore scroll position) or is there already a issue for this case?