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?
Advertisement
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); });