React - scroll to the top of the page after rendering

Question

My React component is as follows :

var ContentBox = React.createClass({

  componentDidMount:function() {
    this.getContents();
  },

  getContents:function() {
    $.ajax({
      url : ......
      success:function(contents) {
        this.setState({
          contents : contents
        });
      }.bind(this)
    });
  },

  componentDidUpdate:function() {
    ReactDOM.findDOMNode(this).scrollTop = 0;
  }
});

Essentially, what I'm trying to do is that when the page is rendered, I want to scroll to the top of the page. The "contents" change depending on the route parameters.

I've tried the solution given in Scroll to the top of the page after render in react.js But it's not working on mine.

UPDATE : The following worked

  componentDidUpdate:function() {
    ReactDOM.findDOMNode(this).scrollIntoView();
  }

Why doesn't ReactDOM.findDOMNode(this).scrollTop = 0; work? Also, I've tried $(window).scrollTop() but that also doesn't work. I tried to put them in the "success" function of the AJAX request, but that doesn't work either.

In your first code block, `findDomNode` should be `findDOMNode`... I've used that logic successfully, so may just be a typo — Jeff Wooden, Nov 17 '15 at 20:22
Nah, that's a typo when I was posting this. Didn't make any difference. — ericbae, Nov 17 '15 at 22:12

score 0 · Answer 1 · answered Jun 04 '23 at 13:54

For react-router-dom v6+

Open App.js file and import:

import { Route, Routes, useLocation } from "react-router-dom";
import { useLayoutEffect } from "react";

Create a scrollTop function just above the "App" function:

const scrollTop = ({ children }) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children;
};

Wrap your routes within the scrollTop function:

function App() {
  return (
    <div className="App">
      <scrollTop>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </scrollTop>
    </div>
  );
}

Here is the completed code

// Import all the pages (Home, about, service, contact)

import { Route, Routes, useLocation } from "react-router-dom";
import { useLayoutEffect } from "react";

const scrollTop = ({ children }) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children;
};

function App() {
  return (
    <div className="App">
      <scrollTop>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </scrollTop>
    </div>
  );
}

export default App;

React - scroll to the top of the page after rendering

1 Answers1

For react-router-dom v6+