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

几天来我一直在努力解决这个问题，并找到了解决方案。

出于未知原因的问题是，导入全局html样式时，NextJS有一些错误。我在全局styles.scss导入中有html类，该类已加载到主包装器中。一旦我从导入中删除了html，滚动问题就会停止并且页面将像在静态站点上一样加载。

在这里https://github.com/zeit/next.js/issues/7594

找到了解决方案

Answer 3

将您的App组件包装为：

<ScrollToTop>
  ... all components there
</ScrollTop>

ScrollTop组件：

import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

const ScrollToTop = ({ children, location: { pathname, search } }) => {
  useEffect(() => {
    try {
      window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    } catch (error) {
      // just a fallback for older browsers
      window.scrollTo(0, 0);
    }
  }, [pathname, search]);

  return children;
};

export default withRouter(ScrollToTop);

Answer 4

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

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

Answer 5

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

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

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

Answer 6

在“页面/布局”组件内部导入下一个路由器

import Router from 'next/router';

// you can then hook into there events

Router.onRouteChangeStart = () => {

};

Router.onRouteChangeComplete = () => {
  window.scroll({
    top: 0,
    left: 0,
  });
};

Router.onRouteChangeError = () => {

};

const Page = props => { 
  return <div>{props.children}</div>
}

Answer 7

就我而言，top: 0 适用于 behavior: 'smooth，但 不适用于 behavior: 'auto'。默认 behavior: 'auto' 值 top: 0 不有效，但任何其他值都有效，例如：

window.scroll({
  top: 1,
});

Next.js链接无法在顶部滚动页面时呈现

7 个答案: