-
-
Notifications
You must be signed in to change notification settings - Fork 195
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Any way to not scroll to top when using back/forward popstates? #48
Comments
While swup does replace the content on back/forward button and in this way changes the browser native behavior, it leaves the scroll control completely to the browser and doesn't rewrite it in any way. If your page scrolls to the top on back/forward, it should mean you were at the top or there is some other problem. Maybe overflow/height set on Here is a discussion about swup currently preserving browsers native behavior as much as possible on popstate, any cotributions on that matter is more than welcome. Cheers! |
Ah, yes. Just realized I have a smooth scrolling library, so I'll need to save the positions between pageviews and apply to popstates somehow. |
Yep, the easiest way is probably to save the scroll for current URL somewhere on each |
Hmm. That's where my JavaScript knowledge hits a wall. Haha. Any pointers? Perhaps;
I guess the main question is how to save it to an array that corresponds to multiple popstates with multiple scroll values... |
Didn't try, but something like this should do the trick. let scrollValues = {};
document.addEventListener('swup:clickLink', event => {
scrollValues[window.location.href] = window.scrollY;
});
document.addEventListener('swup:popState', event => {
setTimeout(function() {
window.scrollTo(0, scrollValues[window.location.href]);
}, 100);
}); Note that reading and setting the scroll amount might be different for you, as you mentioned that you are using some scroll library, which probably has it's own API for that. |
Sweet, thanks for that! Gonna have to wrangle that beast later, but the numbers look right, nonetheless. :) |
I would like to always go back to top when clicking a link and only go back to the saved scroll position when navigating with the back/forward button. How can I achieve this? I played around with the different events but can't seem to figure it out. |
Never mind. Found that I had to integrate the But I'm having a different issue now. When using the back/forward button, the scroll position is now immediately restored to the saved value upon click. But when the transition ends, the scroll position is again at the top of the page instead of the saved scroll value. This is my code:
|
I think the problem is with the
But this way, the scoll position is retrieved on every |
Swup scroll control basically doesn't work properly when The problem there is probably the use of
Here is a list of all events (not including the ones added by plugins). |
Anyone looking to make this work, I ended up doing it like this:
|
@gmrchk I understand, but I'm not sure if I understand it right. Even when I set |
The code shown in this thread doesn't work well with the "Next" button. I'm on Windows/Chrome. This code works better for me. I'm animating with GSAP. // SCROLL BEHAVIOR .....................................................
// Click link = scroll to top
// Back / next buttons = scroll where the user was
this.scrollValues = {};
this.currentPage = window.location.href;
// triggers when link is clicked
swup.on('clickLink', (event) => {
this.scrollBehavior = 'top';
});
// triggers on popstate events (back/forward button)
swup.on('popState', (event) => {
this.scrollBehavior = 'keep';
});
// triggers when animation OUT starts (class is-animating is added to html tag)
swup.on('animationOutStart', (event) => {
this.scrollValues[this.currentPage] = window.scrollY;
});
// triggers right after the content of page is replaced
swup.on('contentReplaced', (event) => {
this.currentPage = window.location.href;
if (this.scrollBehavior == 'keep' && typeof this.scrollValues[window.location.href] !== 'undefined') {
gsap.to(window, { duration: 0.2, scrollTo: this.scrollValues[window.location.href] });
} else {
gsap.to(window, { duration: 0.2, scrollTo: 0 });
}
}); |
As the title...
Just curious how to achieve this, as I'm trying to get as close to native browser behavior as possible on back/forward—and currently it always goes back to the top when going back or forward.
Keep up the good work, btw!
The text was updated successfully, but these errors were encountered: