Torin Torin - 1 year ago 172
React JSX Question

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;
checklistId: this.getParams().checklistId,
sectionId: this.getParams().sectionId
}).then(function (section) {
componentReady: true

this.setState({componentReady: false});

var Checklist = React.createClass({
mixins: [Router.State],

componentWillMount: function () {;


render: function () {
if (this.state.componentReady) {
<section className='checklist-section'>
<header className='section-header'>{ } </header>
<Steps steps={ this.state.section.steps }/>
<a href=`#/${this.getParams().checklistId}/${this.state.section.nextSection.Id}`>
Next Section
} else {...}

module.exports = Checklist;

Answer Source
 componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

is a bad solution. first - because this is undefined in arrow functions. second - because of some bug in react-dom, so that always says findDOMNode was called on an unmounted component even if this.isMounted() === true. third - because scrollIntoView is not the right function to scroll to the top.

I solved this problem by adding:

componentDidUpdate() {
  ReactDOM.findDOMNode(this).scrollTop = 0
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download