HiveBrain v1.2.0
Get Started
← Back to all entries
patternreactCritical

Scroll to the top of the page after render in react.js

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
topthepagerenderreactafterscroll

Problem

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

    this.setState({componentReady: false});
 }

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

  componentWillMount: function () {
    updateStateFromProps.call(this);
  },

  componentWillReceiveProps(){
    updateStateFromProps.call(this);
   },

render: function () {
  if (this.state.componentReady) {
    return(
      
        { this.state.section.name }   
        
        
          Next Section
        
      
    );
    } else {...}
  }
});

module.exports = Checklist;

Solution

Finally.. I used:

componentDidMount() {
  window.scrollTo(0, 0)
}


EDIT: React v16.8+

useEffect(() => {
  window.scrollTo(0, 0)
}, [])

Code Snippets

componentDidMount() {
  window.scrollTo(0, 0)
}
useEffect(() => {
  window.scrollTo(0, 0)
}, [])

Context

Stack Overflow Q#33188994, score: 642

Revisions (0)

No revisions yet.