Back button scroll restoration not working
matteightarms opened this issue · comments
I believe that in a previous version of this plugin the scroll position was always set to the top of the screen when navigating with the back button.
I have tried to set shouldResetScrollPosition: true on a new site I'm working on, but when navigating with the back button the scroll position is always remembered.
I have a scroll based animation on the homepage of a site that I always need to start at the top, so ideally I would like to completely disable the scroll restoration when navigating with the back button.
Current config
const swup = new Swup({
animateHistoryBrowsing: true,
plugins: [
new SwupJsPlugin(options),
new SwupBodyClassPlugin(),
new SwupScrollPlugin({
animateScroll: false,
doScrollingRightAway: false,
shouldResetScrollPosition: true,
}),
],
});
Is this possible to do? Thanks in advance.
As far as I know, there weren't any recent substantial changes to how or when the plugin resets the scroll position. Could be the specific combination of options in play here; animated history browsing is always a bit difficult to debug.
Could you provide a reproducible test case for us to look at? This CodeSandbox template is a good place to start.
Hey @daun thanks for the reply.
There seems to be an issue with that sandbox template, just went to fork it but getting the error:
_swup.default is not a constructor
Not entirely sure why as all dependencies look like they are being imported ok.
You're right. Not sure what's wrong there, we haven't touched that sandbox in forever. I'll look into it and get back to you.
We've pinned swup to v3.0.5 in the CodeSandbox template and it's compiling again, so that you can create your test case @matteightarms
Damn, sorry. I accidentally converted the sandbox to a cloud something. Now everything seems to be broken. Stay tuned! 😄
new starter template at https://codesandbox.io/s/swup-test-case-template-5dqcgs
@matteightarms Let us know if/when the update to the repro template allows you to create a reproducible test case.
@matteightarms Is this still an issue you‘re seeing?
hey @daun so sorry for the delay, got caught up on another project!
so if you head here:
https://codesandbox.io/s/swup-test-case-template-forked-5wrymv?file=/src/index.js
- Scroll half way down the homepage
- Click "page 1"
- Click the back button
You are now halfway down page 1 rather than at the top
If you navigate without the nav you are always taken to the top of the page, it just looks like the scroll plugin doesn't work when the back button is pressed?
Here is an older site that also uses swup and the scroll plugin (with the exact same settings) but the back button always transitions you back to the top of the page
What you are describing actually sounds like the expected behaviour. Swup implements the same scroll restoring logic as the browser. History navigation (back-/forward-buttons) restore the scroll position a page was at before it was left the last time.
I can't remember this plugin not restoring the scroll position on history navigation -- and if I did, I'd have considered it a bug. Let's find out at which version the behavior changed -- there might be a way of re-enabling the behavior you're after. Can you tell the version of swup and scroll-plugin used on the example page where it's working as expected?
Sure, I can absolutely see why you would want the default behaviour to restore scroll position.
On that older site site I'm using:
"@swup/body-class-plugin": "^1.0.1",
"@swup/scroll-plugin": "^1.0.6",
"swup": "^2.0.7"
Thanks.
Thanks @matteightarms for providing us with the versions! I created a test case using these versions:
https://codesandbox.io/s/swup-test-case-template-forked-vgg3nz
I can reproduce the described behaviour. It appears as soon as I set animateHistoryBrowsing to true. That behavior should be considered a bug in these versions of swup+scroll-plugin, and it's a good thing if it's fixed with the current versions.
I would still be open to discuss a new explicit option to disable scroll restoration for scroll-plugin. We should keep in mind though, that we don't have control over the scroll positions if animateHistoryBrowsing is set to false (the browser handles this scenario).
@hirasso Would the scroll option in the visit object solve this in the most recent swup version? Can't test this at the moment, but in my mind this should work:
// Scroll to top on history visits
swup.hooks.on('visit:start', (visit) => {
if (visit.history.popstate) {
visit.scroll.target = '#top';
}
});Adding an option restoreHistoryScrollPosition would be another way to handle this inside of Scroll Plugin.
@hirasso Would the scroll option in the visit object solve this in the most recent swup version? Can't test this at the moment, but in my mind this should work:
It should, indeed! I'm AFK now as well, but if you'd like to give it a go @matteightarms that would be great.
For what it's worth, scroll restoration was introduced here: https://github.com/swup/scroll-plugin/releases/tag/1.3.0
@matteightarms I've re-tested a few scenarios on swup 4 regarding scroll restoration on history visits and found two issues we've fixed in the latest 4.3.1 release. Since you're disabling the scroll animations in the scroll plugin anyway, I think you actually don't need the plugin as long as you're on swup 4. The example hook above may or may not be required, depending on your specific use case.
@matteightarms We've extensively tested the Scroll Plugin with animated history visits and animated scrolling and fixed a few issues along the way. If you install the latest swup release along with the latest Scroll Plugin release, you should find the above example hook to correctly make swup scroll to the top for all history visits, disregarding any stored scroll positions.
hey @daun thank you so much, I will give this a go today and let you know any issues. Appreciate how quickly you all looked into this.