react-router scroll to top on every transition

Question

I have an issue when navigating into another page  its position will remain like the page before  So it won t scroll to top automatically  I ve also tried to use window scrollTo 0  0  on onChange router  I ve also used scrollBehavior to fix this issue but it didn t work  Any suggestions about this

User · Answer

I wrote a Higher-Order Component called withScrollToTop. This HOC takes in two flags:

onComponentWillMount - Whether to scroll to top upon navigation (componentWillMount)
onComponentDidUpdate - Whether to scroll to top upon update (componentDidUpdate). This flag is necessary in cases where the component is not unmounted but a navigation event occurs, for example, from /users/1 to /users/2.

// @flow
import type { Location } from 'react-router-dom';
import type { ComponentType } from 'react';

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

type Props = {
  location: Location,
};

type Options = {
  onComponentWillMount?: boolean,
  onComponentDidUpdate?: boolean,
};

const defaultOptions: Options = {
  onComponentWillMount: true,
  onComponentDidUpdate: true,
};

function scrollToTop() {
  window.scrollTo(0, 0);
}

const withScrollToTop = (WrappedComponent: ComponentType, options: Options = defaultOptions) => {
  return class withScrollToTopComponent extends Component<Props> {
    props: Props;

    componentWillMount() {
      if (options.onComponentWillMount) {
        scrollToTop();
      }
    }

    componentDidUpdate(prevProps: Props) {
      if (options.onComponentDidUpdate &&
        this.props.location.pathname !== prevProps.location.pathname) {
        scrollToTop();
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default (WrappedComponent: ComponentType, options?: Options) => {
  return withRouter(withScrollToTop(WrappedComponent, options));
};

To use it:

import withScrollToTop from './withScrollToTop';

function MyComponent() { ... }

export default withScrollToTop(MyComponent);

User · Answer

A React Hook you can add to your Route component  Using useLayoutEffect instead of custom listeners  import React    useLayoutEffect   from  react   import   Switch  Route  useLocation   from  react-router-dom    export default function Routes       const location   useLocation         Scroll to top if path changes   useLayoutEffect      gt        window scrollTo 0  0         location pathname       return          lt Switch gt           lt Route exact path  quot   quot  gt            lt  Route gt         lt  Switch gt          Update  Updated to use useLayoutEffect instead of useEffect  for less visual jank  Roughly this translates to   useEffect  render components - gt  paint to screen - gt  scroll to top  run effect  useLayoutEffect  render components - gt  scroll to top  run effect  - gt  paint to screen  Depending on if you re loading data  think spinners  or if you have page transition animations  useEffect may work better for you

User · Answer

This was my approach based on what everyone else had done in previous posts  Wondering if this would be a good approach in 2020 using location as a dependency to prevent re-renders  import React    useEffect   from  react   import   useLocation   from  react-router-dom    function ScrollToTop    children           let location   useLocation         useEffect       gt            window scrollTo 0  0            location           return children

User · Answer

It is noteable that the onUpdate       gt  window scrollTo 0  0   method is outdated    Here is a simple solution for react-router 4    const history   createBrowserHistory    history listen     gt        window scrollTo 0  0         lt Router history  history  gt

User · Answer

render         window scrollTo 0  0              Can be a simple solution in case the props are not changed and componentDidUpdate   not firing

User · Answer

React hooks 2020    import React    useLayoutEffect   from  react   import   useLocation   from  react-router-dom    const ScrollToTop  React FC        gt      const   pathname     useLocation      useLayoutEffect      gt        window scrollTo 0  0         pathname       return null      export default ScrollToTop

User · Answer

For smaller apps  with 1-4 routes  you could try to hack it with redirect to the top DOM element with  id instead just a route  Then there is no need to wrap Routes in ScrollToTop or using lifecycle methods

User · Answer

This answer is for legacy code  for router v4  check other answers   lt Router onUpdate       gt  window scrollTo 0  0   history  createBrowserHistory    gt         lt  Router gt    If it s not working  you should find the reason  Also inside componentDidMount   document body scrollTop   0     or window scrollTo 0 0     you could use   componentDidUpdate       window scrollTo 0 0       you could add some flag like  scrolled   false  and then in update   componentDidUpdate       if this scrolled     false       window scrollTo 0 0       scrolled   true

User · Answer

but classes are so 2018  ScrollToTop implementation with React Hooks  ScrollToTop js  import   useEffect   from  react   import   withRouter   from  react-router-dom    function ScrollToTop   history        useEffect      gt        const unlisten   history listen      gt          window scrollTo 0  0               return      gt          unlisten                       return  null      export default withRouter ScrollToTop     Usage    lt Router gt     lt Fragment gt       lt ScrollToTop   gt       lt Switch gt           lt Route path     exact component  Home    gt       lt  Switch gt     lt  Fragment gt   lt  Router gt      ScrollToTop can also be implemented as a wrapper component   ScrollToTop js  import React    useEffect  Fragment   from  react   import   withRouter   from  react-router-dom    function ScrollToTop   history  children        useEffect      gt        const unlisten   history listen      gt          window scrollTo 0  0               return      gt          unlisten                       return  lt Fragment gt  children  lt  Fragment gt      export default withRouter ScrollToTop     Usage    lt Router gt     lt ScrollToTop gt       lt Switch gt           lt Route path     exact component  Home    gt       lt  Switch gt     lt  ScrollToTop gt   lt  Router gt

User · Answer

My solution  a component that I m using in my screens components  where I want a scroll to top    import   useLayoutEffect   from  react    const ScrollToTop        gt        useLayoutEffect      gt            window scrollTo 0  0                    return null      export default ScrollToTop    This preserves scroll position when going back   Using useEffect   was buggy for me  when going back the document would scroll to top and also had a blink effect when route was changed in an already scrolled document

User · Answer

with React router dom v4 you can use   create a scrollToTopComponent component like the one  below  class ScrollToTop extends Component       componentDidUpdate prevProps          if  this props location     prevProps location            window scrollTo 0  0                     render           return this props children          export default withRouter ScrollToTop    or if you are using tabs use the something like the one below  class ScrollToTopOnMount extends Component       componentDidMount           window scrollTo 0  0             render           return null          class LongContent extends Component       render            lt div gt            lt ScrollToTopOnMount  gt            lt h1 gt Here is my long content page lt  h1 gt         lt  div gt              somewhere else  lt Route path   long-content  component  LongContent   gt    hope this helps for more on scroll restoration vist there docs hare react router dom scroll restoration

User · Answer

Here is another method   For react-router v4 you can also bind a listener to change in history event  in the following manner   let firstMount   true  const App    props    gt        if  typeof window     undefined       incase you have server-side rendering too                      firstMount  amp  amp  props history listen  location  action    gt                setImmediate      gt  window scrollTo 0  0       ive explained why i used setImmediate below                     firstMount   false             return            lt div gt               lt MyHeader  gt                           lt Switch gt                                               lt Route path     exact  true  component  IndexPage    gt                   lt Route path   other  component  OtherPage    gt                                       lt  Switch gt                                       lt MyFooter  gt           lt  div gt              mounting app  render   lt BrowserRouter gt  lt Route component  App    gt  lt  BrowserRouter gt    document getElementById  root       The scroll level will be set to 0 without setImmediate   too if the route is changed by clicking on a link but if user presses back button on browser then it will not work as browser reset the scroll level manually to the previous level when the back button is pressed  so by using setImmediate   we cause our function to be executed after browser is finished resetting the scroll level thus giving us the desired effect

User · Answer

I want to share my solution for those who are using react-router-dom v5 since none of these v4 solutions did the work for me   What solved my problem was installing react-router-scroll-top and put the wrapper in the  lt App   gt  like this   const App        gt       lt Router gt       lt ScrollToTop gt         lt App  gt       lt  ScrollToTop gt     lt  Router gt      and that s it  it worked

User · Answer

I had the same issue with my application Using the below code snippet helped me scroll to the top of the page on click of the next button    lt Router onUpdate       gt  window scrollTo 0  0   history   browserHistory  gt       lt  Router gt    However  the issue still persisted on browser back  After a lot of trials  realized that this was because of the browser window s history object  which has a property scrollRestoration which was set to auto Setting this to manual solved my problem    function scrollToTop         window scrollTo 0  0      if   scrollRestoration  in history            history scrollRestoration    manual             lt Router onUpdate   scrollToTop  history  browserHistory  gt        lt  Router gt

User · Answer

Hooks are composable  and since React Router v5 1 we have a useHistory   hook  So based off  zurfyx s answer I ve created a re-usable hook for this functionality      useScrollTop ts import   useHistory   from  react-router-dom   import   useEffect   from  react          Registers a history listener on mount which    scrolls to the top of the page on route change     export const useScrollTop        gt        const history   useHistory        useEffect      gt            const unlisten   history listen      gt                window scrollTo 0  0                       return unlisten          history

User · Answer

If you are running React 16 8  this is straightforward to handle with a  component that will scroll the window up on every navigation  Here is in scrollToTop js component  import   useEffect   from  react   import   useLocation   from  react-router-dom    export default function ScrollToTop       const   pathname     useLocation       useEffect      gt        window scrollTo 0  0         pathname       return null      Then render it at the top of your app  but below Router  Here is in app js  import ScrollToTop from    scrollToTop    function App       return        lt Router gt         lt ScrollToTop   gt         lt App   gt       lt  Router gt           or in index js  import ScrollToTop from    scrollToTop    ReactDOM render       lt BrowserRouter gt           lt ScrollToTop   gt           lt App   gt       lt  BrowserRouter gt      document getElementById  root

User · Answer

This is hacky  but works   I just add  window scrollTo 0 0    to render

User · Answer

The documentation for React Router v4 contains code samples for scroll restoration  Here is their first code sample  which serves as a site-wide solution for    scroll to the top    when a page is navigated to   class ScrollToTop extends Component     componentDidUpdate prevProps        if  this props location     prevProps location          window scrollTo 0  0               render         return this props children        export default withRouter ScrollToTop    Then render it at the top of your app  but below Router   const App        gt       lt Router gt       lt ScrollToTop gt         lt App  gt       lt  ScrollToTop gt     lt  Router gt        or just render it bare anywhere you want  but just one     lt ScrollToTop  gt      copied directly from the documentation  Obviously this works for most cases  but there is more on how to deal with tabbed interfaces and why a generic solution hasn t been implemented

User · Answer

For react-router v4  here is a create-react-app that achieves the scroll restoration  http   router-scroll-top surge sh     To achieve this you can create decorate the Route component and leverage lifecycle methods   import React    Component   from  react   import   Route  withRouter   from  react-router-dom    class ScrollToTopRoute extends Component     componentDidUpdate prevProps        if  this props path     this props location pathname  amp  amp  this props location pathname     prevProps location pathname          window scrollTo 0  0               render         const   component  Component     rest     this props       return  lt Route     rest  render  props   gt    lt Component     props    gt      gt          export default withRouter ScrollToTopRoute     On the componentDidUpdate we can check when the location pathname changes and match it to the path prop and  if those satisfied  restore the window scroll   What is cool about this approach  is that we can have routes that restore scroll and routes that don t restore scroll   Here is an App js example of how you can use the above   import React    Component   from  react   import   BrowserRouter as Router  Route  Link   from  react-router-dom   import Lorem from  react-lorem-component   import ScrollToTopRoute from    ScrollToTopRoute   import    App css    const Home        gt       lt div className  App-page  gt       lt h2 gt Home lt  h2 gt       lt Lorem count  12  seed  12    gt     lt  div gt      const About        gt       lt div className  App-page  gt       lt h2 gt About lt  h2 gt       lt Lorem count  30  seed  4    gt     lt  div gt      const AnotherPage        gt       lt div className  App-page  gt       lt h2 gt This is just Another Page lt  h2 gt       lt Lorem count  12  seed  45    gt     lt  div gt      class App extends Component     render         return          lt Router gt           lt div className  App  gt             lt div className  App-header  gt               lt ul className  App-nav  gt                 lt li gt  lt Link to     gt Home lt  Link gt  lt  li gt                 lt li gt  lt Link to   about  gt About lt  Link gt  lt  li gt                 lt li gt  lt Link to   another-page  gt Another Page lt  Link gt  lt  li gt               lt  ul gt             lt  div gt             lt Route exact path     component  Home    gt             lt ScrollToTopRoute path   about  component  About    gt             lt ScrollToTopRoute path   another-page  component  AnotherPage    gt           lt  div gt         lt  Router gt                export default App    From the code above  what is interesting to point out is that only when navigating to  about or  another-page the scroll to top action will be preformed  However when going on   no scroll restore will happen   The whole codebase can be found here  https   github com rizedr react-router-scroll-top

User · Answer

I found that ReactDOM findDomNode this  scrollIntoView   is working  I placed it inside componentDidMount

User · Answer

In a component below  lt Router gt   Just add a React Hook  in case you are not using a React class     React useEffect      gt        window scrollTo 0  0         props location

User · Answer

In your router js  just add this function in the router object  This will do the job   scrollBehavior             document getElementById  app   scrollIntoView             Like this     Routes js    import vue from  blah   import Router from  blah    let router   new Router       mode   history       base  process env BASE URL      scrollBehavior             document getElementById  app   scrollIntoView               routes                  url   Solar System                   url   Milky Way                   url   Galaxy

[javascript] react-router scroll to top on every transition

Examples related to javascript

Examples related to reactjs

Examples related to react-router

Examples related to react-router-redux