ReactJS – Scroll to Top

class LessonHeader extends React.Component {

    componentDidMount() {

        // Scroll to the Title of the Lesson - this is useful when users goes to next/previous lesson using the bottom arrows
        this.refs["lessonTitle"].scrollIntoView({ block: 'end', behavior: 'smooth' });
    }

    componentDidUpdate(prevProps) {

        //  Scroll to the Title of the Lesson - Only do this if navigated to a new lesson
        if (this.props.LessonNumber !== prevProps.LessonNumber)
        {
            this.refs["lessonTitle"].scrollIntoView({ block: 'end', behavior: 'smooth' });

        }
    }

    render() {

        return (
            <div className="text-center">                            <h2 id="Lesson Title" ref="lessonTitle">{ this.props.LessonHeading }</h2>
            </div>
        )
    }