How to automatically scroll to the top of the page after render() in React JS

Assume we have a long list page, click a link after scroll down few screens and the new page scroll bar stay at the middle !! How to automatically scroll to the top of the page after render() in React JS
componentDidUpdate() {

// ReactDOM.findDOMNode(this).scrollTop = 0

// ReactDom.findDOMNode(this).scrollIntoView();

window.scrollTo(0, 0)

}
Tested and on window.scrollTo(0, 0) works

 React v16.3 the React.createRef() is preferred

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

handleScrollToElement(event) {
  if (<some_logic>){
    this.mainBodyRef.current.scrollIntoView()
  }
}

render() {

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

Leave a Reply

Your email address will not be published. Required fields are marked *