javascript - Barba.js：scrollRestoration 和 Wordpress 问题

Question

我正在尝试使用 barba.js 在我的主页和单页之间放置一些动画（如果 wordpress 有更好的效果，请告诉我），实际上，当我点击我的帖子时，单页会像另一页一样滚动，即使我放了它也会恢复滚动

barba.hooks.before(() => {
  if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
  }
});

barba.init({
  debug: true,
  transitions: [{
    name: 'projet-transition',
    from: {
      namespace: [
        'home'
      ]
    },
    to: {
      namespace: [
        'projet'
      ]
    },
    enter(data) {
        console.log(data)
    },
    leave(data) {
      console.log(data)
    },
  }]
});

Answer 1

要在浏览链接时重置滚动位置，您可以执行以下操作：

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

关于滚动恢复

History.scrollRestoration影响前后历史导航。如果您需要在向后或向前导航时恢复滚动位置，请查看此 barba.js github 问题。如果没有，我认为最好不要在钩子中将 scrollRestoration 设置为手动，该before钩子在每个页面转换时运行。你可以把它放在巴巴钩子外面或beforeOnce钩子里。