我有一个这样的组件：
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”方法会感觉效率不高，有没有更优雅的解决方案让页面始终加载在顶部？
【问题讨论】：
标签： javascript reactjs next.js
最终在 app.js 主文件中执行此操作：
componentDidMount() {
Router.events.on('routeChangeComplete', () => {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
}
【讨论】：
我有过这样的经历，我尝试了很多方法让它发挥作用，但没有成功。 这种路由更改行为应该默认发生，除非您正在做不同的事情。
我注意到，在我从 html/body 标签中删除 overflow-x: hidden 后，一切都开始正常工作了。
尽量不要在你的 html/body 元素中使用这种样式：
html, body {
- overflow-x: hidden;
}
您可以将包装元素（即div）的最大宽度设置为100vw 和overflow-x:hidden 以归档相同的内容。
【讨论】：
当我的页面无法在顶部呈现时，我遇到了同样的问题。在我的global.css 中，我有这个：
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
删除scroll-behavior: smooth; 后，一切都开始按预期工作。
【讨论】：
我在这个问题上苦苦挣扎了几天，找到了解决方案。
由于某种未知原因，问题是 NextJS 在导入全局 html 样式时出现了一些错误。我的全局 styles.scss 导入中有 html 类，该类已加载到我的主包装器中。一旦我从导入中删除了 html，滚动问题就会停止，并且页面会像在静态网站上一样加载。
【讨论】：
就我而言，我使用的是 Bootstrap，我必须在 bootstrap.min.css 文件中删除：
:root {
scroll-behavior: 'smooth'
}
【讨论】：
在您的页面/布局组件内部导入下一个路由器
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>
}
【讨论】：
在我的情况下，top: 0 与 behavior: 'smooth 一起使用，但 不是 与 behavior: 'auto' 一起使用。默认behavior: 'auto' 值top: 0 不 工作，但任何其他值工作例如：
window.scroll({
top: 1,
});
【讨论】：
这最终对我有用（更新到最新的 NextJS 路由配置）
Router.events.on('routeChangeComplete', (url) => {
window.scroll({
top: 0,
left: 0,
});
});
【讨论】：
可能的原因可能是以下根元素之一上的overflow-x: hidden;：body、html 或#__next。
您可以尝试添加min-height: 100% 或替换为overflow-x: clip;。
【讨论】：
用以下方式包装您的 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);
【讨论】：
react-router。