我目前正在尝试在页面刷新时滚动到顶部。到目前为止,我已经能够在路线更改时实现滚动到顶部,但不是 在页面刷新 - 以某种方式 react 总是恢复其先前的位置 .我怎样才能防止这种情况发生?
这就是我实现滚动到顶部的方式(认为 window.scrollTo(0, 0)
内部 componenDidMount()
会有所帮助,但没有):
class ScrollToTop extends Component {
componentDidMount() {
window.scrollTo(0, 0);
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.location.pathname !== prevProps.location.pathname) {
window.scrollTo(0, 0);
}
}
render() {
return null;
}
}
export default withRouter(ScrollToTop);
class App extends Component {
render() {
return (
<BrowserRouter>
<ScrollToTop/>
<Header/>
<Home/>
<Projects/>
<div className="follow-cursor"/>
</BrowserRouter>
);
}
}
export default App;
最佳答案
您可以为此使用一些纯 JS:
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
这将使页面在重新加载之前滚动到顶部,因此重新加载结束时一切都会好起来的。
关于javascript - 在页面刷新时将滚动 react 到顶部 - 不要恢复位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60813961/