javascriptswup

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?


Solution

  • 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);
    });