[scroll] Scroll to the top of the page after render in react.js

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;

For Functional components;

import React, {useRef} from 'react';
function ScrollingExample (props) {
// create our ref
const refToTop = useRef();

return (
<h1 ref={refToTop}> I wanna be seen </h1>
// then add enough contents to show scroll on page
<a onClick={()=>{
    setTimeout(() => { refToTop.current.scrollIntoView({ behavior: 'smooth' })}, 500)
        }}>  Take me to the element <a>
);
}

This code will cause a smooth behavior on the scroll:

<div onClick={() => {
   ReactDOM.findDOMNode(this.headerRef)
      .scrollIntoView({behavior: "smooth"});
                }} 
  className='go-up-button' >
</div>

You can pass other parameters inside the scrollIntoView() Following syntax can be used:

element.scrollIntoView();
element.scrollIntoView(alignToTop); // Boolean parameter
element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop Optional Is a Boolean value:

If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions Optional Is an Object with the following properties:

*behavior* Optional
    Defines the transition animation.
    One of "auto", "instant", or "smooth". Defaults to "auto".
*block* Optional
    One of "start", "center", "end", or "nearest". Defaults to "center".
*inline* Optional
    One of "start", "center", "end", or "nearest". Defaults to "nearest".

More details can be found here: MDN docs

If I assume you are rendering a chapter of say, a book per page, all you need to do is add this to your code. This worked for me like magic.

    componentDidUpdate(prevProps) {
      if (prevProps.currentChapter !== this.props.currentChapter) {
        window.scrollTo(0, 0);
      }
    }

With this, you have no need creating a ref on the component being rendered.

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])

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.

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

Finally.. I used:

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

EDIT: React v16.8+

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

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

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

This works for me.

import React, { useEffect } from 'react';

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

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

}, []);

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} />
    }
}

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) {_x000D_
    super(props)_x000D_
    this.childDiv = React.createRef()_x000D_
  }_x000D_
_x000D_
  componentDidMount = () => this.handleScroll()_x000D_
_x000D_
  componentDidUpdate = () => this.handleScroll()_x000D_
_x000D_
  handleScroll = () => {_x000D_
    const { index, selected } = this.props_x000D_
    if (index === selected) {_x000D_
      setTimeout(() => {_x000D_
        this.childDiv.current.scrollIntoView({ behavior: 'smooth' })_x000D_
      }, 500)_x000D_
    }_x000D_
  }

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;

All the solutions talk about adding the scroll on componentDidMount or componentDidUpdate but with the DOM.

I did all of that and didn't worked.

So, figured out some other way that works just fine for me.

Added componentDidUpdate() { window.scrollTo(0, 0) } on the header, that mine is out of the <Switch></Switch> element. Just free in the app. Works.

I also found about some ScrollRestoration thing, but I'm lazy now. And for now going to keep it the "DidUpdate" way.

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).

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

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

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

Something like this worked for me on a component:

<div ref="scroller" style={{height: 500, overflowX: "hidden", overflowY: "auto"}}>
      //Content Here
</div>

Then in whatever function is dealing with updates:

this.refs.scroller.scrollTop=0

This is what I did:

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

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

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>
)

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

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 {_x000D_
  position: fixed;_x000D_
  right: 1rem;_x000D_
  bottom: 1rem;_x000D_
  display: none;_x000D_
  width: 2.75rem;_x000D_
  height: 2.75rem;_x000D_
  text-align: center;_x000D_
  color: #fff;_x000D_
  background: rgba(90, 92, 105, 0.5);_x000D_
  line-height: 46px;_x000D_
}

Nothing worked for me but:

componentDidMount(){

    $( document ).ready(function() {
        window.scrollTo(0,0);
    });
}

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>
}

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])
}

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>
);

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'

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.

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

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

I added an Event listener on the index.html page since it is through which all page loading and reloading is done. Below is the snippet.

// Event listener
addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
}, false);
  
function hideURLbar() {
    window.scrollTo(0, 1);
}

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

componentDidMount() {
  ReactDOM.findDOMNode(this).scrollIntoView();
}