React scroll to top on page refresh - don't restore position

user_11397070 0
Viewed 12802

I'm currently trying to scroll to top on page refresh. So far I've been able to implement scroll to top on route change, but not on page refresh - somehow react always restores its previous position. How can I prevent that from happening?

That's how I implemented scroll to top (thought window.scrollTo(0, 0) inside of componenDidMount() would help, but it didn't):

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 javascript
2 Answers

You can use some pure JS for that:

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

This will make page scroll to top before it reloads, so everything will be fine when reload ends.

user_54213210

Another way of implementing a Custom Component for Scroll To Top in React-17.0.2 is by using hooks:

Step 1: Create custom component: ScrollToTop.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;

Step 2: Call ScrollToTop component into Root:

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

    </>
  );
}

export default App;
user_154158190
Related