How can I set scroll to top false only when user clicks back?

Question

I use Scroll component to scroll to top whenever the route changes :

Scroll.js

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

export default withRouter(ScrollToTop);

<Router>
  <Fragment>
    <ScrollToTop />
    <Switch>
        <Route path="/" exact component={Home} />
    </Switch>
  </Fragment>
</Router>

The thing I want to achieve is whenever user clicks back on the browser the scroll to top should not work.

How to set scroll to top to false whenever user clicks back in browser ?

I'm sorry, deleted old comment, perhaps this is what you can use https://stackoverflow.com/a/14586082/1101930 — Jayr, Sep 15 '20 at 07:51

score 1 · Accepted Answer · answered Sep 15 '20 at 08:19

Can't you check your history action and if it's POP, just ignore scroll?

Something like

function ScrollToTop({ history }) {
  
  useEffect(() => {
    const unlisten = history.listen(() => {
      if (history.action !== 'POP') {
          window.scrollTo(0, 0);
      }
    });
    return () => {
      unlisten();
    }
  }, []);

  return (null);
}

How can I set scroll to top false only when user clicks back?

1 Answers1