335

I have a problem, which I have no ideas, how to solve. In my react component I display a long list of data and few links at the bottom. After clicking on any of this links I fill in the list with new collection of the links and need to scroll to the top.

The problem is - how to scroll to the top after new collection is rendered?

'use strict';

// url of this component is #/:checklistId/:sectionId

var React = require('react'),
  Router = require('react-router'),
  sectionStore = require('./../stores/checklist-section-store');


function updateStateFromProps() {
  var self = this;
  sectionStore.getChecklistSectionContent({
    checklistId: this.getParams().checklistId,
    sectionId: this.getParams().sectionId
  }).then(function (section) {
    self.setState({
      section,
      componentReady: true
    });
  });

    this.setState({componentReady: false});
 }

var Checklist = React.createClass({
  mixins: [Router.State],

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      <section className='checklist-section'>
        <header className='section-header'>{ this.state.section.name }   </header>
        <Steps steps={ this.state.section.steps }/>
        <a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
          Next Section
        </a>
      </section>
    );
    } else {...}
  }
});

module.exports = Checklist;
1

39 Answers 39

582

Finally.. I used:

componentDidMount() {
  window.scrollTo(0, 0)
}

EDIT: React v16.8+

useEffect(() => {
  window.scrollTo(0, 0)
}, [])
15
  • 3
    This is only solution that worked for me. Also tried: ReactDOM.findDOMNode(this).scrollTop = 0 and componentDidMount() { this._div.scrollTop = 0 } render() { return <div ref={(ref) => this._div = ref} /> } Oct 9, 2016 at 5:47
  • According to W3Schools, this solution is currently supported by all browsers. Also the ReactDOM library is being deprecated in future versions of React.
    – BishopZ
    Jan 24, 2017 at 22:21
  • 2
    @Tomasz - I found i still had this issues sometimes when I had certain divs set to height or min-height: 100%. I had to remove and either wrap it in a parent or move further into the tree where it could still scroll Feb 28, 2017 at 21:36
  • 3
    This worked for me but not under componentDidMount, since CDM may not be fired when the state change results in a re-rendering of the page. So put this call -- window.scrollTo(0, 0); -- wherever it is you change the state. Jun 25, 2017 at 1:56
  • 10
    For those using hooks, the following code will work. React.useEffect(() => { window.scrollTo(0, 0); }, []); Note, you can also import useEffect directly: import { useEffect } from 'react'
    – Powderham
    Jul 19, 2019 at 10:54
98

Since the original solution was provided for very early version of react, here is an update:

constructor(props) {
    super(props)
    this.myRef = React.createRef()   // Create a ref object 
}

componentDidMount() {
  this.myRef.current.scrollTo(0, 0);
}

render() {
    return <div ref={this.myRef}></div> 
}   // attach the ref property to a dom element
7
60

You could use something like this. ReactDom is for react.14. Just React otherwise.

    componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

Update 5/11/2019 for React 16+

  constructor(props) {
    super(props)
    this.childDiv = React.createRef()
  }

  componentDidMount = () => this.handleScroll()

  componentDidUpdate = () => this.handleScroll()

  handleScroll = () => {
    const { index, selected } = this.props
    if (index === selected) {
      setTimeout(() => {
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })
      }, 500)
    }
  }

3
  • Of all the suggestions on this page, this is the only one that works for me.
    – Josh F
    Mar 20, 2017 at 0:58
  • Note: if componentDidUpdate does not work for you, componentDidMount is another alternative. Apr 24, 2017 at 5:31
  • findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode. reactjs.org/docs/react-dom.html Nov 6, 2019 at 6:51
26

In React Routing there is the problem that if we redirect to the new route, then it won't automatically take you to the top of the page.

Even I did have the same issue.

I just added the single line to my component and it worked like butter.

componentDidMount() {
    window.scrollTo(0, 0);
}

Refer: react training

3
  • is this the recommended way if I use this for my 'jump to top' button? or if there's a 'react' way where we don't use the window object?
    – Toxnyc
    Aug 6, 2019 at 20:30
  • 1
    Thanks for bringing into the notice, the solution I have given is applicable for a react-router dom version less than v5, I was using v4.2.2 and there when you navigate to another page you weren't taken by default to the top of the page, so we have to manually take the user to the top of the page after navigation, but with v5.0.1 react-router dom stopped shipping the scroll restoration out of the box, because as per their document they say that browsers started supporting this feature by default and with latest version of react-router-dom you will taken to the top of the page after navigation. Aug 7, 2019 at 4:03
  • 1
    @Toxnyc so using window object is what Javascript is, If react is on top of Javascript then even if you use any of the React Plugin behind the scenes it will be using Javascript and window object only, as per my knowledge react document is not having anything by which we can get the details of window screen. we have to go with Javascript for making it work. Aug 7, 2019 at 4:06
25

Hook solution:

  • Create a ScrollToTop hook

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

    const ScrollToTop = ({ children, location: { pathname } }) => {
      useEffect(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }, [pathname]);

      return children || null;
    };

    export default withRouter(ScrollToTop);

  • Wrap your App with it

    <Router>
        <ScrollToTop>
           <App />
        </ScrollToTop>
    </Router>

Documentation : https://reacttraining.com/react-router/web/guides/scroll-restoration

1
  • Amazing this works for me flawless. Thanks for the help! ❤ Jan 27, 2022 at 23:32
22

For those using hooks, the following code will work.

React.useEffect(() => {
  window.scrollTo(0, 0);
}, []);

Note, you can also import useEffect directly: import { useEffect } from 'react'

1
  • 2
    The [] as the second parameter means it will only happen on the first render, have you tried without?
    – Powderham
    Aug 14, 2019 at 15:26
13

This could, and probably should, be handled using refs:

"... you can use ReactDOM.findDOMNode as an "escape hatch" but we don't recommend it since it breaks encapsulation and in almost every case there's a clearer way to structure your code within the React model."

Example code:

class MyComponent extends React.Component {
    componentDidMount() {
        this._div.scrollTop = 0
    }

    render() {
        return <div ref={(ref) => this._div = ref} />
    }
}
4
  • This works great. Thanks. To be clear, I put the <div ref={(ref) => this._div = ref} /> in the very first <div> of my render statement. The rest of my render stays exactly the same.
    – Josh F
    Jan 11, 2017 at 18:42
  • In case you are using Styled components you will need to use "innerRef" instead of "ref". Great solution
    – furcicm
    Apr 11, 2018 at 19:30
  • Totally works. For what I was working on, I could be even simpler with <div ref="main"> and then this.refs.main.scrollTop=0 Aug 14, 2018 at 13:14
  • 2
    @chuckfactory setting refs using strings is probably going to be removed at some point, and actually has some interesting drawbacks you might want to learn about. news.ycombinator.com/edit?id=12093234
    – NJensen
    Mar 26, 2019 at 18:47
13

You can do this in the router like that:

ReactDOM.render((
<Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
     <Route path='/' component={App}>
        <IndexRoute component={Home}></IndexRoute>
        <Route path="/about" component={About}/>
        <Route path="/work">
            <IndexRoute component={Work}></IndexRoute>
            <Route path=":id" component={ProjectFull}></Route>
        </Route>
        <Route path="/blog" component={Blog}/>
    </Route>
 </Router>
), document.getElementById('root'));

The onUpdate={() => window.scrollTo(0, 0)} put the scroll top. For more information check: codepen link

3
  • elegant solution that only requires a tiny code change in the router rather than having each component handle it itself. <3
    – alengel
    Jul 21, 2017 at 14:49
  • Unfortunately onUpdate fires with every new routeParam routed in a given route. So if you for instance have a page with a bunch of images, and if you could expand the image in a modal when clicked changing the the route to /somePage/:imgId, it will scroll up :(. Any way to "control" whether or not to fire the onUpdate event on specific routes/params? Apr 12, 2018 at 17:12
  • When I tried this, TypeScript complained that onUpdate does not exist in HashRouter's props... If anybody encounters the same issue: I ended up using the ScrollToTop solution described further down (and in the react-router docs) which worked perfectly for me.
    – Nicole
    Jul 27, 2018 at 18:37
13

This works for me.

import React, { useEffect } from 'react';

useEffect(() => {
    const body = document.querySelector('#root');

    body.scrollIntoView({
        behavior: 'smooth'
    }, 500)

}, []);
1
  • It works to me, because I have the click component inside the parent component, I could not use "useRef" Aug 30, 2020 at 15:38
9

Here's yet another approach that allows you to choose which mounted components you want the window scroll position to reset to without mass duplicating the ComponentDidUpdate/ComponentDidMount.

The example below is wrapping the Blog component with ScrollIntoView(), so that if the route changes when the Blog component is mounted, then the HOC's ComponentDidUpdate will update the window scroll position.

You can just as easily wrap it over the entire app, so that on any route change, it'll trigger a window reset.

ScrollIntoView.js

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

export default WrappedComponent => {
  class ResetWindowScroll extends Component {
    componentDidUpdate = (prevProps) => {
      if(this.props.location !== prevProps.location) window.scrollTo(0,0);
    }

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

Routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from '../components/App';
import About from '../components/pages/About';
import Blog from '../components/pages/Blog'
import Index from '../components/Landing';
import NotFound from '../components/navigation/NotFound';
import ScrollIntoView from '../components/navigation/ScrollIntoView';

 export default (
    <Route path="/" component={App}>
        <IndexRoute component={Index} />
        <Route path="/about" component={About} /> 
        <Route path="/blog" component={ScrollIntoView(Blog)} />
        <Route path="*" component={NotFound} />
    </Route>
);

The above example works great, but if you've migrated to react-router-dom, then you can simplify the above by creating a HOC that wraps the component.

Once again, you could also just as easily wrap it over your routes (just change componentDidMount method to the componentDidUpdate method example code written above, as well as wrapping ScrollIntoView with withRouter).

containers/ScrollIntoView.js

import { PureComponent, Fragment } from "react";

class ScrollIntoView extends PureComponent {
  componentDidMount = () => window.scrollTo(0, 0);

  render = () => this.props.children
}

export default ScrollIntoView;

components/Home.js

import React from "react";
import ScrollIntoView from "../containers/ScrollIntoView";

export default () => (
  <ScrollIntoView>
    <div className="container">
      <p>
        Sample Text
      </p>
    </div>
  </ScrollIntoView>
);
2
  • ScrollIntoView.js is giving me the following error "unused expression, expected an assignment or function call"
    – EX0MAK3R
    Oct 19, 2018 at 7:25
  • @EX0MAK3R - Updated answer. Oct 19, 2018 at 12:49
9

This solution is working for the Functional component as well as the Class Base.

First of all, I do not like the idea of Scroll to top on every re-render, instead, I like of attache function to the particular event.

Step #1: Create a function to ScrollToTop

const scrollToTop = () => {
    window.scrollTo({
        top: 0,
        behavior: "smooth",
    });
};

Step #2: Call this function on an event e.g onClick

onRowClick={scrollToTop()}
// onClick={scrollToTop()}
// etc...
1
  • This worked very smoothly. Thank you! Apr 21, 2022 at 9:24
8

I'm using react-router ScrollToTop Component which code described in react-router docs

https://reacttraining.com/react-router/web/guides/scroll-restoration/scroll-to-top

I'm changing code in single Routes file and after that no need of change code in every component.

Example Code -

Step 1 - create ScrollToTop.js Component

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

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)

Step 2 - In App.js file, add ScrollToTop Component after <Router

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)
1
  • really good solution!if you have routes just render it at the top of your routes, but below Router.I didnt have to change every single component.
    – rash
    Jun 26, 2020 at 5:54
8

If all want to do is something simple here is a solution that will work for everybody

add this mini function

scrollTop()
{
    window.scrollTo({
        top: 0,
        behavior: "smooth"
    });
}

call the function as following from the footer of the page

<a className="scroll-to-top rounded" style={{display: "inline"}} onClick={this.scrollTop}>TOP</a>

if you want to add nice styles here is the css

.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(90, 92, 105, 0.5);
  line-height: 46px;
}

2
  • the code snippet doesn't seem to work. But the solution worked for me. Thanks and cheers!
    – sudonitin
    Apr 12, 2020 at 8:33
  • @JohnVandivier maybe you are doing something wrong because we have tested this in almost all of the webs developed by our company. Please read and double-check again. Jun 8, 2021 at 14:39
8

I have tried @sledgeweight solution but it does not work well for some of the views. But adding a setTimeout seems to work perfectly. In case someone facing the same issue as me. Below is my code.

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

const ScrollToTop = () => {
    const { pathname } = useLocation()
    useEffect(() => {
        console.log(pathname)
        /* settimeout make sure this run after components have rendered. This will help fixing bug for some views where scroll to top not working perfectly */
        setTimeout(() => {
            window.scrollTo({ top: 0, behavior: 'smooth' })
        }, 0)
    }, [pathname])
    return null
}

export default ScrollToTop

Use it in AppRouter.js as

<Router>
    <ScrollToTop/>
    <App>
</Router>
2
  • Good idea to add smooth behavior.
    – Gel
    Nov 1, 2022 at 1:34
  • Update - Right now I am using react-router v6.4 and their ScrollRestoration components seem a good solution for such a case. Nov 3, 2022 at 12:12
7

This is the only thing that worked for me (with an ES6 class component):

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}
1
  • Likewise. I tried all of the other solutions and this is the only one that worked for me. Apr 12, 2019 at 3:24
7

All of the above didn't work for me - not sure why but:

componentDidMount(){
    document.getElementById('HEADER').scrollIntoView();
}

worked, where HEADER is the id of my header element

1
  • I used a useEffect hook but this worked great for me on a Gatsby project. Thanks!
    – jj0b
    Nov 27, 2019 at 23:26
6

Using Hooks in functional components, assuming the component updates when theres an update in the result props

import React, { useEffect } from 'react';

export const scrollTop = ({result}) => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [result])
}
1
6

The page that appears after clicking, just write into it.

  componentDidMount() {
    window.scrollTo(0, 0);
  } 
6

Smooth scroll to top . In hooks you can use this method inside lifecycle mounting state for once render

useEffect(() => {
  window.scrollTo({top: 0, left: 0, behavior: 'smooth' });
}, [])
5

I tried everything, but this is the only thing that worked.

 useLayoutEffect(() => {
  document.getElementById("someID").scrollTo(0, 0);
 });
5

Looks like all the useEffect examples dont factor in you might want to trigger this with a state change.

const [aStateVariable, setAStateVariable] = useState(false);

const handleClick = () => {
   setAStateVariable(true);
}

useEffect(() => {
  if(aStateVariable === true) {
    window.scrollTo(0, 0)
  }
}, [aStateVariable])
5

I was doing a SPA in React 17.0 using functional components and window.scroll, window.scrollTo and all of this variants doesn't work for me. So I made a solution using useRef hook. I created a span tag in the top of the component with Ref and then I used and effect with ref.current.scrollIntoView()

There is a short example:

import React, { useEffect,useRef} from 'react';

export const ExampleComponent = () => {

  const ref = useRef();

  useEffect(() => {
      ref.current.scrollIntoView()
  }, []);

return(

 <>
   <span ref={ref}></span>
   <YourCodeHere />
   <MoreCode />
</>

) }

1
  • Thanks, the only one that works with me too!
    – Billy
    Dec 13, 2022 at 12:50
4

This is what I did:

useEffect(() => ref.current.scrollTo(0, 0));
const ref = useRef()

       return(
         <div ref={ref}>
           ...
         </div>
        )
4

For React v18+ my recommendation will be to use wrapper component, will be the easiest way to execute.

Step 1: Create a ScrollToTop component (component/ScrollToTop.js)

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

export function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Step 2: Wrap your App with it (index.js)

<React.StrictMode>
  <BrowserRouter>
    <ScrollToTop />
    <App />
  </BrowserRouter>
</React.StrictMode>

Explanation: Every time pathname changes useEffect will be called to scroll the page to the top.

3

I'm using React Hooks and wanted something re-usable but also something I could call at any time (rather than just after render).

// utils.js
export const useScrollToTop = (initialScrollState = false) => {
  const [scrollToTop, setScrollToTop] = useState(initialScrollState);

  useEffect(() => {
    if (scrollToTop) {
      setScrollToTop(false);
      try {
        window.scroll({
          top: 0,
          left: 0,
          behavior: 'smooth',
        });
      } catch (error) {
        window.scrollTo(0, 0);
      }
    }
  }, [scrollToTop, setScrollToTop]);

  return setScrollToTop;
};

Then to use the hook you can do:

import { useScrollToTop } from 'utils';

const MyPage = (props) => {
  // initialise useScrollToTop with true in order to scroll on page load 
  const setScrollToTop = useScrollToTop(true);

  ...

  return <div onClick={() => setScrollToTop(true)}>click me to scroll to top</div>
}
0
3

I ran into this issue building a site with Gatsby whose Link is built on top of Reach Router. It seems odd that this is a modification that has to be made rather than the default behaviour.

Anyway, I tried many of the solutions above and the only one that actually worked for me was:

document.getElementById("WhateverIdYouWantToScrollTo").scrollIntoView()

I put this in a useEffect but you could just as easily put it in componentDidMount or trigger it any other way you wanted to.

Not sure why window.scrollTo(0, 0) wouldn't work for me (and others).

3

I had the same for problem for a while. Adding window.scrollTo(0, 0);to every page is painful and redundant. So i added a HOC which will wrap all my routes and it will stay inside BrowserRouter component:

 <ScrollTop>
    <Routes />
  </ScrollTop>

Inside ScrollTopComponent we have the following:

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollTop = (props) => {
  const { children } = props;

  const location = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location]);

  return <main>{children}</main>;
};

export default ScrollTop;
3

Solution for functional component - Using useEffect() hook

 useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);
2

If you are doing this for mobile, at least with chrome, you will see a white bar at the bottom.

This happens when the URL bar disappears. Solution:

Change the css for height/min-height: 100% to height/min-height: 100vh.

Google Developer Docs

2

None of the above answers is currently working for me. It turns out that .scrollTo is not as widely compatible as .scrollIntoView.

In our App.js, in componentWillMount() we added

this.props.history.listen((location, action) => {
        setTimeout(() => { document.getElementById('root').scrollIntoView({ behavior: "smooth" }) }, 777)
    })

This is the only solution that is working universally for us. root is the ID of our App. The "smooth" behavior doesn't work on every browser / device. The 777 timeout is a bit conservative, but we load a lot of data on every page, so through testing this was necessary. A shorter 237 might work for most applications.

Not the answer you're looking for? Browse other questions tagged or ask your own question.