javascript - 在页面刷新时将滚动 react 到顶部 - 不要恢复位置

Question

我目前正在尝试在页面刷新时滚动到顶部。到目前为止，我已经能够在路线更改时实现滚动到顶部，但不是 在页面刷新 - 以某种方式 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;

Answer 1

您可以为此使用一些纯 JS:

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

这将使页面在重新加载之前滚动到顶部，因此重新加载结束时一切都会好起来的。