Scroll to the top of the page after render in react.js
Finally.. I used:
componentDidMount() {
window.scrollTo(0, 0)
}
EDIT: React v16.8+
useEffect(() => {
window.scrollTo(0, 0)
}, [])
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
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)
}
}