See ReplacementSwap for a reusable component solving resets

Banner Page Three

 [Goto to Page Three] 

The approach taken here is much simpler but less automatic. There are three elements that differ between page two and page three: The heading, the link, and the main text at the bottom. Theses are marked with data-swap="unique-name". Then this demo indeed use the astro:before-swap event to define a new implementation for swap() that overwrites the marked elements in the current DOM with the corresponding elements from newDocument and leaves everything else as it is.

no-reset.js
document.addEventListener('astro:before-swap', ev => {


  const pathname=ev.from.pathname;
  if (pathname.endsWith('/no-reset/two/')
    || pathname.endsWith('/no-reset/three/')
    || pathname.endsWith('/no-reset/four/')
  ) {
    ev.swap = () => {
      ev.newDocument.querySelectorAll('[data-swap]').forEach(el => {
        document.querySelector(`[data-swap="${el.dataset.swap}"]`)?.replaceWith(el);
      });
    };
  }
});

Seen that the title of the browsers tab is still on page two? So we swapped those three marked elements in, but we didn't yet swap the HTML <head> with the title, yet :)