Next.js 链接不会在页面滚动到顶部时呈现

Question

我有一个像这样的组件：

const Milestone = props => {
  const { path, disabled, index, ...rest } = props;

  if (disabled) return <MilestoneCheck disabled />;

  return (
    <Link href={path} passHref>
      <a>
        <MilestoneCheck {...rest} />
      </a>
    </Link>
  );
};

当我单击“链接”转到下一页，然后单击后退按钮返回到我来自的位置时，页面不会从顶部加载，而是从上次滚动位置加载。在路由更改上添加“scrollTop”方法会感觉效率不高，是否有更优雅的解决方案来始终将页面加载到顶部？

Answer 1

我有过这样的经历，我尝试了很多方法让它发挥作用，但没有成功。这种路由更改行为应该默认发生，除非您正在做一些不同的事情。

overflow-x: hidden我注意到，从标签中删除后，html/body一切都开始正常工作。

尽量不要在 html/body 元素中使用这种形式的样式：

html, body {
- overflow-x: hidden;
}

您可以将包装元素（即div）的最大宽度设置为100vw并overflow-x:hidden存档相同的内容。

Answer 2

当我的页面无法在顶部呈现时，我遇到了同样的问题。就我而言，global.css我有这个：

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

删除scroll-behavior: smooth;一切后开始按预期工作。

Answer 3

最终在主 app.js 文件中执行此操作：

  componentDidMount() {
    Router.events.on('routeChangeComplete', () => {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    });
  }

Answer 4

可能的原因可能在于overflow-x: hidden;根元素之一：body、html或#__next。

您可以尝试添加min-height: 100%或替换为overflow-x: clip;.