reactjs 页面刷新时滚动到顶部-不恢复位置

kuarbcqp 于 2022-12-26 发布在 React

关注(0)|答案(3)|浏览(376)

我现在正在尝试在页面刷新时滚动到顶部。到目前为止，我已经能够在路线更改时实现滚动到顶部，但不能在页面刷新时**-不知何故，react总是恢复到它以前的位置**。我如何防止这种情况发生？
这就是我实现滚动到顶部的方法（本以为componenDidMount()中的window.scrollTo(0, 0)会有帮助，但没有）：

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;

reactjs

来源：https://stackoverflow.com/questions/60813961/react-scroll-to-top-on-page-refresh-dont-restore-position

3条答案

按热度按时间

qlzsbp2j1#

您可以使用一些纯JS来实现这一点：

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

这将使页面滚动到顶部之前，它重新加载，所以一切都会很好，当重新加载结束。

赞(0）回复(0）举报 2022-12-26

jjhzyzn02#

在React-17.0.2中实现Scroll To Top的自定义组件的另一种方法是使用钩子：
步骤1：创建自定义组件：滚动到顶部.js

import { useEffect } from "react";
import { useLocation } from "react-router";

const ScrollToTop = (props) => {
  const location = useLocation();
  useEffect(() => {
    if (!location.hash) {
      window.scrollTo(0, 0);
    }
  }, [location]);

  return <>{props.children}</>
};

export default ScrollToTop;

第二步：将ScrollToTop组件调用到Root中：

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Router>
          <ScrollToTop />
    <Switch> ..... </Switch>
            </Router>
      </BrowserRouter>

    </>
  );
}

export default App;

赞(0）回复(0）举报 2022-12-26

5ktev3wc3#

//在（App.js）中尝试此解决方案。对我有效。useEffect(() => { window.history.scrollRestoration = 'manual' }, []);

赞(0）回复(0）举报 2022-12-26