react button click scroll section codepen

1const styles = {
2  width: '500px',
3  height: '500px',
4};
5
6function App() {
7  const div1 = React.useRef()
8  const div2 = React.useRef()
9  const div3 = React.useRef()
10
11  /**
12   * @param {HTMLElement} target 
13   */
14  function smoothScroll(target) {
15    const { top } = target.getBoundingClientRect()
16    window.scrollTo({
17      top: top + window.pageYOffset,
18      behavior: "smooth"
19    });
20  }
21
22  return (
23    <div>
24      <div ref={div1} style={{ background: 'yellowgreen', ...styles }}>
25        <p><button onClick={() => smoothScroll(div1.current)}>yellowgreen</button></p>
26        <p><button onClick={() => smoothScroll(div2.current)}>seagreen</button></p>
27        <p><button onClick={() => smoothScroll(div3.current)}>skyblue</button></p>
28      </div>
29
30      <div ref={div2} style={{ background: 'seagreen', ...styles }}>
31        <p><button onClick={() => smoothScroll(div1.current)}>yellowgreen</button></p>
32        <p><button onClick={() => smoothScroll(div2.current)}>seagreen</button></p>
33        <p><button onClick={() => smoothScroll(div3.current)}>skyblue</button></p>
34      </div>
35
36      <div ref={div3} style={{ background: 'skyblue', ...styles }}>
37        <p><button onClick={() => smoothScroll(div1.current)}>yellowgreen</button></p>
38        <p><button onClick={() => smoothScroll(div2.current)}>seagreen</button></p>
39        <p><button onClick={() => smoothScroll(div3.current)}>skyblue</button></p>
40      </div>
41    </div>
42  )
43}
44
45ReactDOM.render(<App />, document.getElementById('root'));
46