Keep the scroll position with back button / browsing back

See original GitHub issue

Hello, when I click a link in the bottom of a page I will be on the bottom of the next page, I fixed that with the scroll plugin but when when I go back, the scroll position is allways the top of the page, so in the both case Swup is doing the opposite of what I want, I am doing something wrong ?

Here is my config :

const options = {
	plugins: [
		new SwupScriptsPlugin({
			head: false,
			body: false
		}),
		new SwupScrollPlugin({
			doScrollingRightAway: true,
			animateScroll: true,
		}),
		new SwupPreloadPlugin(),
		new SwupDebugPlugin(),
	],
	animateHistoryBrowsing: false,
	animationSelector: '[class*="transition-"]',
	containers: ["#swup"],
	cache: false,
	linkSelector:
	'a[href^="' +
	window.location.origin +
	'"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',
	skipPopStateHandling: function(event) {
	if (event.state && event.state.source == "swup") {
	 	return false;
	}
		return true;
	}
};

const swup = new Swup(options);

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
aernicommented, Sep 14, 2019

I first struggled with this as well. You have to save the scroll positions of previous pages. This is how I’m doing it. It only works when navigating back though. Forward navigation doesn’t work …

scrollPositions = [];
retrieveScrollPosition = false;

swup.on('clickLink', () => {
  saveScrollPosition();
});

swup.on('popState', () => {
  retrieveScrollPosition = true;
});

swup.on('animationInStart', () => {
  if (retrieveScrollPosition) scrollToSavedPosition();
  retrieveScrollPosition = false;
});
    
function saveScrollPosition() {
  scrollPositions[window.location.href] = window.scrollY;
}

function scrollToSavedPosition() {
  window.scrollTo(0, scrollPositions[window.location.href]);
}

And in the scroll plugin I had to define this. Otherwise there’s some weird scrolling up and down happening.

new SwupScrollPlugin({
    doScrollingRightAway: false,
    animateScroll: false,
    scrollFriction: 0.3,
    scrollAcceleration: 0.04
})
0reactions
aernicommented, Sep 15, 2019

@gmrchk The scroll position actually doesn’t work on Chrome either. Or maybe I’m doing something wrong on my end?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I retain the scroll position of a scrollable area when ...
During page unload, get the scroll position and store it in local storage. Then during page load, check local storage and set that...
Read more >
Restore the scroll position when browser back button is clicked
When I've looked at the product and clicked the Google Chrome back button, the scroll position is back at the beginning of the...
Read more >
How to return to the same scroll position when using browser's ...
Here's a snippet of code that I use to save the scroll position. I use it when a user has navigated away from...
Read more >
Restore the scroll position when browser back button is clicked
Clicking on the internal link and scroll. Hit the browser back button, and your scroll position changes back to the original position.
Read more >
Chrome no longer saves scroll position when going back on ...
go to a non-Wiki site; scroll down away from the top; click on a link to another page; navigate back; confirm that my...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found