Scroll page to the nested React component on a button click

Use scrollIntoView to scroll down to the element and React's refs to get the DOM of your component.

Here is a small example that illustrates what you want to do.

var Hello = React.createClass({
  componentDidMount() {
   alert("I will scroll now");

   this.refs.hello.scrollIntoView(); // scroll...
  },

  render: function() {
    return <div ref="hello">Hello {this.props.name}</div>; // reference your component
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Have you tried using an anchor?

Put an id attribute ('myTarget') to your target component and replace the button with a link (href: '#mytarget').

This does not work with fixed headers, unfortunately.

If you are using typescript.

import * as React from 'react';

class Hello extends React.Component<{}> {
  private helloRef = React.createRef<HTMLDivElement>();

  public render() {
    return (
      <div ref={this.helloRef}>Hello</div>
      <button onClick={() => { 
            if (this.helloRef && this.helloRef.current) {
              this.helloRef.current.scrollIntoView();
            } 
          }
      }>Button1</button>
    );
  }
}

1. Create a reference using useRef

   const trackButton = useRef();
   

2. Use scrollIntoView method to scroll to the specific Element/ Component

       trackButton.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })