我正在使用barba.js來淡入新頁面。代碼必須放置在 barba 包裝器 div 之間。但是,當我單擊指向新頁面的鏈接時,新頁面會淡入與上一頁相同的位置。因此,如果用戶單擊鏈接,則新頁面將加載到附近,我不想要。如何讓新頁面加載到頂部?我在堆棧上找到了關于函數的答案,但我仍然不明白如何使它工作。scrollRestoration有人可以幫我編譯下面的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
如何在點擊加載時將新頁面滾動到頂部?
料青山看我應如是
2022-09-02 16:13:53