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
JavaScript
x
25
25
1
const options = {
2
animationSelector: '[class*="transition-fade"]',
3
animateHistoryBrowsing: true,
4
plugins: [
5
6
new SwupScrollPlugin({
7
animateScroll: false
8
})
9
]
10
};
11
12
const swup = new Swup(options);
13
14
let scrollValues = {};
15
16
swup.on('clickLink', () => {
17
scrollValues[window.location.href] = window.scrollY;
18
});
19
20
swup.on('popState', () => {
21
setTimeout(function() {
22
window.scrollTo(0, scrollValues[window.location.href]);
23
}, 100);
24
});
25