亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在點擊加載時將新頁面滾動到頂部?

如何在點擊加載時將新頁面滾動到頂部?

料青山看我應如是 2022-09-02 16:13:53
我正在使用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
查看完整描述

2 回答

?
四季花海

TA貢獻1811條經驗 獲得超5個贊

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

    }

  });

此處的工作示例:https://codepen.io/durchanek/project/editor/ZWOyjE


查看完整回答
反對 回復 2022-09-02
?
阿晨1998

TA貢獻2037條經驗 獲得超6個贊

這應該是你要找的:


barba.hooks.enter(() => {

  window.scrollTo(0, 0);

});

(可以在文檔中找到)


查看完整回答
反對 回復 2022-09-02
  • 2 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號