javascript - 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'方法会感觉不是很有效，是否有更优雅的解决方案可以始终将页面加载在顶部？

标签： javascriptreactjsnext.js

Answer 1

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

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