Override scroll behavior during visits

[psntr]

Hi there,

I don't understand how to override the scrollTo plugin behaviour. By default when the page changes, the scrollTo plugin scroll to the top of the page, after the swup:contentReplaced event.

My question is, how to use the method swup.scrollTo(document.body, 2000) for a specific page?

To trigger action on my page I use a "date-template" attached to my <main data-template="project"> HTML and in my javascript I have something like that:

swup.on('contentReplaced', init);

function init() {
    document.querySelectorAll('[data-swup]').forEach(function (container) {
        switch (container.dataset.template) {
            case 'project':
                // Here I don't want to scrollTo 0,0 from the default scroll Plugin
            break;
        }
    )}
}

I try to randomly add the swup.scrollTo(document.body, 2000) in different parts of the code, but every time it's scrolling back to the top.

[aleclarson]

Can you share your solution, @psntr ?

[hirasso]

@psntr please note that swup has changed significantly since this issue was created.

Anyways – depending on your exact use case, this is how you could overwrite the scroll position (and optionally animate it, depending on popstate):

const swup = new Swup({
  plugins: [
    new SwupScrollPlugin(),
  ],
  hooks: {
    "content:replace": (visit) => {
      /** look for #my-custom-target in the incoming document and scroll towards it if found */
      if (!visit.to.hash && visit.to.document?.querySelector('#my-custom-target')) {
        visit.scroll.target = '#my-custom-target';
        /** optional: animate if this is not a history popstate visit */
        visit.scroll.animate = !visit.history.popstate;
      }
    },
  },
});

You can learn more about swup's hook system in the docs.

[hirasso]

Alternatively, if you want to have complete control, you can replace the content:scroll hook:

swup.hooks.replace("content:scroll", (visit, args, defaultHandler) => {
  /**
   * check for some condition, and if it evaluates to true, scroll to anywhere
   */
  if (visit.to.document?.querySelector('#my-custom-element')) {
    swup.scrollTo?.(2000, true);
    return true;
  }
  return defaultHandler!(visit, args);
});