Identifying scroll targets

[elisabetperez]

Describe your problem 🧐

Hi all,
I've worked on many projects with Swup as a web developer. I am using Swup 4 at the moment for a new webpage I'm building and I'm encountering some issues. There's a jump link to the bottom section of my homepage that isn't working. I installed SwupScrollPlugin (and upgraded Swup to > 4.2.0) and used it amongst my plugins like this:

this.swup = new Swup({
      linkSelector: "a[href], area[href], svg a[*|href]",
      plugins: [
        new SwupHeadPlugin(),
        new SwupScriptsPlugin({
          head: true,
          body: true,
        }),
        new SwupDebugPlugin({
          globalInstance: true,
        }),
        new SwupJsPlugin(transitionOptions),
        new SwupScrollPlugin({
          getAnchorElement: (hash) => {
            hash = hash.replace("#", "");
            return document.querySelector(`[data-scroll-target="${hash}"]`);
          },
        }),
      ],
    });

These are the versions of the plugins I'm using + swup:

    "@swup/debug-plugin": "^4.0.4",
    "@swup/head-plugin": "^2.1.2",
    "@swup/js-plugin": "^3.1.1",
    "@swup/scripts-plugin": "^2.1.0",
    "@swup/scroll-plugin": "^3.3.1",
    "swup": "^4.5.0",

These are my events:

 this.swup.hooks.on("content:replace", () => {
      this.contentReplaced();
    });

    // = willReplaceContent
    this.swup.hooks.before("content:replace", () => {
      this.willReplaceContent();
    });

However, when clicking on my jump link nothing is happening. Why is that?

<a href="http://someurl.com/#support">Jump Link</a>

thanks in advance
cc @andresclua

What is your question? 🙋‍♀️

Why is the jump link not working with SwupScrollPlugin?

URL to minimal reproduction 🔗

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

The code looks fine. Can you create a minimal reproduction to narrow it down?

[elisabetperez]

hey @daun - I just uploaded the whole project to an staging environment here https://supportjimmstg.wpenginepowered.com/
You'll find a link (href="#support") in the top green banner that should scroll the user down to a bottom section (with id="support").
This is the warning I get:

Any ideas are welcome! Thank youuu

[daun]

Removing the getAnchorElement function from your setup script should solve this. The getAnchorElement option is used to find the scroll target element in case you're not using id attributes, but some other convention. From what I'm seeing in your source code, you're using id anyway so it should work out of the box without this option.

[elisabetperez]

thanks for the quick reply @daun! so it would simply be:

this.swup = new Swup({
      linkSelector: "a[href], area[href], svg a[*|href]",
      plugins: [
        new SwupHeadPlugin(),
        new SwupScriptsPlugin({
          head: true,
          body: true,
        }),
        new SwupDebugPlugin({
          globalInstance: true,
        }),
        new SwupJsPlugin(transitionOptions),
        new SwupScrollPlugin(),
      ],
    });

new SwupScrollPlugin(),

right?

[daun]

Looks about right!

[elisabetperez]

it's working perfectly fine now thanks a lot!
@daun !

[elisabetperez]

also, @daun how would you make the scroll from this Press page (https://supportjimmstg.wpenginepowered.com/press/) to the #support section in the homepage more effective? You need to click on Support or the green banner's link. Currently I'm landing on the last section of the homepage and not the #support section. Code remains the same:

class Core {
  constructor(payload) {
    this.swup = new Swup({
      linkSelector: "a[href], area[href], svg a[*|href]",
      plugins: [
        new SwupHeadPlugin(),
        new SwupScriptsPlugin({
          head: true,
          body: true,
        }),
        // new SwupDebugPlugin({
        //   globalInstance: true,
        // }),
        new SwupJsPlugin(transitionOptions),
        new SwupScrollPlugin(),
      ],
    });
    this.isBlazy = payload.blazy;
    this.instances = [];
    this.init();
    this.events();
  }

thanks in advance!

[daun]

I'd guess that's because the page height changes when the accordion elements in the FAQ section are collapsed. Swup will calculate the position of the #support section right after the new page content was inserted. At that point, the question items are still full height and only collapse after some time. You need to adjust your CSS to collapse them by default so the page height doesn't jump while any elements are loaded or set up. Maybe display: none; for the content part, but it depends.

[andresclua]

hey @daun, thanks for the support - is there a way we execute some kind of function or callback once all this elements (tabs, collapse) are ready ?

[daun]

You could try returning a Promise from the content:replace hook. See pausing execution in the docs. However, that will stall the visit before scrolling. The ideal solution would be a setup where the elements are initialized synchronously and don't need an artificial timeout. For example, by making sure any hidden elements hidden via CSS and don't need a long-running animation to hide during setup.

[andresclua]

To begin, we sincerely appreciate your feedback; it greatly assists us in determining our next steps.

Regarding the issue, we are actively addressing it while utilizing the following package: https://www.npmjs.com/package/@terrahq/collapsify.

Since we are the creators of this package, we are committed to resolving it. However, if no alternative solutions present, we may consider implementing an artificial timeout as a last resort.

thanks for your help

[elisabetperez]

hey again @daun - first of all, thank you so much for your time.
We've been reviewing our node package and found some other basic issues we want to troubleshoot with you on how to implement this plugin.

We use this hook for when content has been replaced like this:

 this.swup.hooks.on("content:replace", () => {
      this.contentReplaced();
 });

and we use this one for when the content is about to be replaced.

this.swup.hooks.before("content:replace", () => {
      this.willReplaceContent();
});

Our aim here is to use the plugin after all the content has been replaced and transition has finished. We've tried using visit:end but it's not working for us. How would you do this? How would you call the plugin once all the content has been replaced?

Thank you so much again for you time. We really do appreciate all your inputs.

[daun]

The scroll plugin will either scroll at the very beginning of the transition (visit:start) or in the middle of the transition after updating the page (content:replace). There's currently no option to perform the scroll at the end of the transition (visit:end), and I suspect it wouldn't be a great user experience.

[daun]

I'd suggest tackling those issues at the root, by making sure the height of the document doesn't change and swup will find the correct scroll position. If that's not possible, you could look into maintaining a local copy of the scroll plugin that performs the scroll at the end of the transitions.

[andresclua]

hey @daun , we ended up doing some "internal checks" if all our internal libraries have finished modifying the DOM and it works properly.

Thanks for all the help @elisabetperez - you can close this ticket!

[elisabetperez]

Hey! First off, we want to thank you for all the help you've given us in the past few weeks. We've been working on getting variable-height elements like the marquee, page sliders, and collapse to load, emit a variable, and without the sum of those variables, the out transition doesn't happen. In other words, we can confirm that the variable-height elements are loaded, then the out transition occurs, and after that, the scroll happens. The results on desktop are satisfying. However, we're running into inconsistencies on mobile. This time we're not using SwupScrollPlugin. Would adding this help us reduce inconsistencies?
Here's the link https://supportjimmstg.wpenginepowered.com/

RPReplay_Final1706631783.MP4

RPReplay_Final1706631579.1.mov

Thanks in advance!
cc @andresclua

[andresclua]

FYI site url is - https://supportjimmstg.wpenginepowered.com/

[daun]

Hey there, just FYI, I'm currently super busy and lack the time to investigate and help out here. You might consider creating a new discussion to get the attention of other users.

[finfreedom]

thanks