Sapper: goto doesn't reset scroll position

Created on 24 Mar 2020  路  4Comments  路  Source: sveltejs/sapper

Describe the bug
When calling goto from your code, when the page is scrolled such that the top of it is off screen, and navigating to an equally long page, the scroll position is not reset to 0, even if the page has not been visited before.

To Reproduce
Create two pages of 200% length with a button at the bottom. Cause the button to call goto passing the next page as a parameter.

Expected behavior
I would expect goto to default to scrolling the page to the top on navigation, especially if the page has not been visited before.

Information about your Sapper Installation:
Google Chrome | 80.0.3987.132聽(Official Build)聽(64-bit)
OS | Linux

  • Sapper version (Please check you can reproduce the issue with the latest release!)

0.27.11

  • Svelte version (Please check you can reproduce the issue with the latest release!)

3.20.1

  • If it is an exported (npm run export) or dynamic application.

Dynamic

  • Whether your application uses Webpack or Rollup

Rollup

Severity

I can work around it with:

      await goto('/some-page')
      window.scrollTo(0, 0)

so not too critical.

enhancement good first issue help wanted

Most helpful comment

It would be great if there was an option to do it since this is a very common problem with SPA routers.

Something like:

goto('/something', {resetScroll: true});

All 4 comments

It would be great if there was an option to do it since this is a very common problem with SPA routers.

Something like:

goto('/something', {resetScroll: true});

Is this still valid? This actually describes the inverse of the current behaviour.

I have written a test as part of this PR that shows that goto scrolls to 0,0 by default.

The PR adds an option to preserve the scroll position.

@antony I think this was fixed by https://github.com/sveltejs/sapper/pull/1320, so I'm going to close this. Let me know if it's still an issue

I鈥檝e noticed that the scroll position does not get set to the top after redirecting with this.redirect. I鈥檒l make a separate issue and repro; not sure it鈥檚 related to the OP here

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Rich-Harris picture Rich-Harris  路  3Comments

nolanlawson picture nolanlawson  路  4Comments

keyvan-m-sadeghi picture keyvan-m-sadeghi  路  4Comments

Rich-Harris picture Rich-Harris  路  3Comments

Snugug picture Snugug  路  4Comments