【问题标题】:Barba js scroll positionBarba js滚动位置
【发布时间】:2020-07-14 08:24:56
【问题描述】:

我是 barba.js 的新手,所以只是想了解一下。

执行页面转换时,我的浏览器页面滚动保持在原来的位置。这是故意的吗?

是否有可能在转换后像往常一样在顶部加载下一页?

这是我的代码

function pageTransition() {
  var tl = gsap.timeline();

  tl.to('ul.transition li', { duration: .5, scaleY: 1, transformOrigin: "top left", stagger: .2 })
  tl.to('ul.transition li', { duration: .5, scaleY: 0, transformOrigin: "top left", stagger: .1, delay: .1})
}

function contentAnimation() {
  var tl = gsap.timeline();

  tl.from('.hero', { duration: 1, translateY: 50, opacity: 0 })
}

function delay(n){
  n = n || 2000;
  return new Promise(done => {
    setTimeout(() => {
      done();
    }, n)
  });
}

barba.init({
  sync: true,

  transitions: [{
    async leave(data) {
      const done = this.async();

      pageTransition();
      await delay(500);
      done();
    },
    async enter(data) {
      contentAnimation();
    },
    async once(data) {
      contentAnimation();
    }
  }]
});

【问题讨论】:

    标签: javascript barbajs


    【解决方案1】:

    再次检查文档后,我找到了钩子。

    barba.hooks.enter(() => {
      window.scrollTo(0, 0);
    });
    

    如果其他人有同样的问题,这可以解决问题。

    【讨论】:

      猜你喜欢
      • 2014-10-08
      • 2022-11-23
      • 1970-01-01
      • 1970-01-01
      • 2018-07-24
      • 1970-01-01
      • 2015-06-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多