scroll to bottom doesn't work in componentDidMount react

Question

What's wrong with my code? I don't see the scroll happening, no error. Perhaps props came after the scroll happens?

class MsgPanel extends Component {

    componentDidMount() {
        window.scrollTo(0, 0) // won't work
    }

    render() {
        return(
            <div>
                {this.props.something}
            </div>
        )
    }
}

You could drop this window function into timeout function with `1ms` delay, but I guess it's not the case. — kind user, Jul 05 '17 at 09:09

Winter · Answer 1 · 2017-07-05T09:45:00.627

window.scrollTo(0, 0) is the top of the page, if you want it to scroll to the bottom of the page then you need to increase the value of the second argument.

window.scrollTo(0, 500);

Ok, so that was not the problem. If you are using react-router you could do it on the Route.

<Route exact onUpdate={() => window.scrollTo(0, 0)} path="/mycomponent" component={MyComponent} />

Check out the discussion here: https://github.com/ReactTraining/react-router/issues/2144

Also, make sure your css it ok: JavaScript scrollTo method does nothing?

scroll to bottom doesn't work in componentDidMount react

1 Answers1