如何在点击加载时将新页面滚动到顶部？

Question

我正在使用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

Answer 1

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

Answer 2

这应该是你要找的：

barba.hooks.enter(() => {

  window.scrollTo(0, 0);

});

（可以在文档中找到）