Skip to content

How to transition to top of the page with swup js

Using Swup JS I achieved a nice transition effect which works fine except for one issue.

If I scroll down to a certain point on page “A”, hit the url to transition to page “B”, I am not transitioned to the very top of page “B” but instead the scroll point is the same or close.

How can I make swup js not remember the scroll position and transition me to the top of the page?

Answer

const options = {
    animationSelector: '[class*="transition-fade"]',
    animateHistoryBrowsing: true,
    plugins: [

        new SwupScrollPlugin({
            animateScroll: false
        })
    ]
};

const swup = new Swup(options);

let scrollValues = {};

swup.on('clickLink', () => {
    scrollValues[window.location.href] = window.scrollY;
});

swup.on('popState', () => {
    setTimeout(function() {
        window.scrollTo(0, scrollValues[window.location.href]);
    }, 100);
});