Force scroll position to remain fixed

[bozdevs]

My website also has a preview function. For example: "/localhost/?preview=/about/"

• Someone visiting the homepage "/localhost/" clicks on the link and goes to the link "/localhost/?preview=/about/".
• When this link is opened, it shows the same things as "/localhost/", but it also shows the content of "/about/" in a modal.
• Here it uses lazy loading (fetch).
• Everything is normal up to this point. However, when you click on the link on the "/localhost/" page and go to the "/localhost/?preview=/about/" page, naturally "Swup" pushes the scroll of the page to the top. But I don't want this to happen. I want it to stay in the same position when you go to the "/localhost/?preview=/about/" page, regardless of where it is on the "/localhost/" page.
• And in the same way, when a button on the "/localhost/?preview=/about/" page is clicked, I close the modal by running the "swup.navigate('/localhost/')" special method. But in this case, the "scrollbar" position is reset and it goes back to the beginning.
• I struggled a lot to overcome this situation but I could not solve it.
  • https://swup.js.org/plugins/scroll-plugin/#shouldresetscrollposition
  • https://swup.js.org/plugins/scroll-plugin/#reset-vs-restore

Does anyone have any suggestions to overcome this?

[daun]

You can disable scroll restoration for each visit. It's right in the docs: Disable scroll reset.

swup.hooks.on('visit:start', (visit) => {
  visit.scroll.reset = false
})

[bozdevs]

This worked but affected the "scroll" of all links. I have filter it with "classList",

<a href="..." class="js:keep-scroll">...</a>

<script>
  swup.hooks.on("visit:start", (visit) => {
    if (visit.trigger?.el?.classList.contains("js:keep-scroll"))
      visit.scroll.reset = false;
  });
</script>

but I also need to add a setting to the swup.navigate("/localhost/") method that I wrote for the return,

swup.navigate("/localhost/", { scroll: { reset: false } })

It would be great if there was a solution for second case.

[daun]

Instead of a button that closes the modal with swup.navigate, you could use a link there and make it look like a button. In that case the hook would still run and apply.

[bozdevs]

Instead of a button that closes the modal with swup.navigate, you could use a link there and make it look like a button. In that case the hook would still run and apply.

I can't do this because that button actually runs a method that closes the modal and runs some commands in the background. Among those commands is swup.navigate.

If this can't be solved programmatically, I'll delete swup.navigate and try to run .click() on a hidden link instead.

[daun]

You could install that click handler on the link as well, no? And close the modal from there.

[bozdevs]

You could install that click handler on the link as well, no? And close the modal from there.

If I do that, swup will start working immediately. Instead, I will hide the link, click the button again, and after the necessary commands are run, I will simulate clicking the hidden link with javascript .click(), just like in swup.navigate. I hope it works :)