Swup.js: Scroll to Top of new page?

Design help Custom code
1

Hey guys,

Been looking into Swup.js as an alternative to Barba (not that it is better or not, it’s just that I felt more comfy with CSS animations than JS/GSAP, for my on-page-load animations, since on-page cannot be triggered if done from within Webflow, as far as I understand).

I cloned this project, and created a few more sections to try to test the scrolling plugin. Swup has a similar issue as barba, where the native/base code doesn’t have a “scroll-to-top” option, so I’ve been trying to add it myself. (The issue is that when if you scroll on one page, and click on a link to go the other page, the new page opens up as if already scrolled the same distance as the previous page)

I looked into Swup’s documentation, but I haven’t been able to make it work yet, and I’m not too sure what I missed.

The current code now is:

<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="./dist/SwupScrollPlugin.js"></script>

<script>
      
  function init() {
    Webflow.destroy();
    Webflow.ready();
    Webflow.require('ix2').init();
  };
  
  const swup = new Swup();
  init();

const options = {
    plugins: [
      
new SwupScrollPlugin({
    doScrollingRightAway: false,
    animateScroll: true,
    scrollFriction: 0.3,
    scrollAcceleration: 0.04,
        })
    ]
};
  
</script>

The last part of the code is where the scroll plugin is, and I’m not figuring out where to add the “scroll to top” part. I tried scrollTo(0, 0) without success. Should I specify the body’s ID and use it an anchor? Is there something else I’m missing?

Here is the link to the project, custom code in both pages settings before body tag: Link
And here is the Live preview

1 Like