[英]How to scroll new page to top on load on click?
我正在使用 barba.js 淡入新頁面。代碼必須放在 barba 包裝器 div 之間。 但是,當我單擊指向新頁面的鏈接時,新頁面會在與前一頁面相同的 position 處淡入。因此,如果用戶單擊鏈接,則新頁面正在附近加載,這是我不想要的。
如何讓新頁面加載到頂部?
我在堆棧上找到了有關scrollRestoration
function 的答案,但我仍然不明白如何使這項工作。
有人可以幫我編譯下面的 js 代碼,添加一些 css 或 html 來解決這個問題嗎?
$(window).scrollTop(0);
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".animate-this", {
duration: .2, opacity: 0, delay: 0, y: 30, //scale:0, delay: 0.2,
});
tl.to(".animate-this", {
duration: 0, opacity: 0, delay: 0, scale:0, //scale:0, delay: 0.2,
});
tl.fromTo(".loading-screen", {width: 0, left: 0}, {
duration: 1,
width: "100%",
left: "0%",
ease: "expo.inOut",
delay: 0.3,
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "expo.inOut",
delay: 0, //CHANGE TIME HERE END TRANS
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: .5, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2500);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});
看看: https://pasteboard.co/Ja33erZ.gif
這里還有一個代碼筆來檢查我的問題(html,css): https://codepen.io/cat999/project/editor/AEeEdg
不需要滾動恢復,這可以通過在過渡期間重置滾動scrollRestoration
來完成:
tl.fromTo(".loading-screen", {width: 0, left: 0}, {
duration: 1,
width: "100%",
left: "0%",
ease: "expo.inOut",
delay: 0.3,
onComplete: function() {
window.scrollTo(0, 0);
}
});
這應該是您正在尋找的:
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
(可以在文檔中找到)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.