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>
);
}
}
Create a reference using useRef
const trackButton = useRef();
Use scrollIntoView method to scroll to the specific Element/ Component
trackButton.current.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })