How to pass a ref into a class function - reactjs

Question

I'm making a single-page website and I want to use refs to tell the code where to scroll when a button is clicked. These buttons should scroll to a specific part of the website. I am using this code to scroll to a specific div ref in the window. Specifically, I call scrollToRef() to scroll to the homeRef div. Is there anyway I can pass a ref parameter into scrollToRef() so I can specify which ref to scroll to?
class App extends Component {
constructor(props) {
super(props);
this.aboutRef = React.createRef();
this.demoRef = React.createRef();
this.homeRef = React.createRef();
}
scrollToRef = () => window.scrollTo(0, this.homeRef.current.offsetTop);
render() {
return (
<div className="home-page">
<header className="home-page-header">
<div className="home-page-logo">
<img src={logo} alt="company logo" width="200vh" height="40" />
</div>
<ul className="home-page-links">
<li><button onClick={this.scrollToRef}>Home</button></li>
<li><button >About</button></li>
<li><button >Demo</button></li>
<li><button>Contact</button></li>
</ul>
</header>
<div className="home-page-background" ref={this.homeRef}>
<section className="website-links">
<div>
<button >Home</button>
</div>
<div>
<button >Demo</button>
</div>
</section>
</div>
<div className="about" ref={this.aboutRef}>
<ul>
<li className="orange">
<div>
<h1>Lorem ipsum</h1>
<h3>lorem ipsum lorem ipsum lorem ipsum</h3>
</div>
<div>
<img src={blank} />
</div>
</li>
<li className="blue">
<div>
<img src={blank} />
</div>
<div>
<h1>Lorem ipsum</h1>
<h3>lorem ipsum lorem ipsum lorem ipsum</h3>
</div>
</li>
<li className="orange">
<div>
<h1>Lorem ipsum</h1>
<h3>lorem ipsum lorem ipsum lorem ipsum</h3>
</div>
<div>
<img src={blank} />
</div>
</li>
<li className="blue">
<div>
<img src={blank} />
</div>
<div>
<h1>Lorem ipsum</h1>
<h3>lorem ipsum lorem ipsum lorem ipsum</h3>
</div>
</li>
</ul>
</div>
<div className="virtual-demo" ref={this.demoRef}>
<h1>Demo</h1>
<figure>
<img src={blank} />
<figcaption>Testing image</figcaption>
</figure>
</div>
</div>
);
}
}

Answer 1

Like this?
scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);
<li><button onClick={() => this.scrollToRef(this.homeRef)}>Home</button></li>

Answer 2

You can simply use HTML to do this instead of use JavaScript:
<li>Home</li>
<div className="home-page-background" id="home">