import React from 'react'
import './index.css'

const ScrollTest = () => {
  const myRef1 = React.useRef();
  const myRef2 = React.useRef();
  const myRef3 = React.useRef();
  const myRef4 = React.useRef();
  const myRef5 = React.useRef();
  const myRef6 = React.useRef();
  const myRef7 = React.useRef();

  const scrollTo = () =>  {
    const myRef = myRef3;
    if (myRef.current) {
      window.scrollTo(0, myRef.current.offsetTop || 0)
    }
  };
  return (
    <div className='root'>
        <div ref={myRef1}></div>
        <div ref={myRef2}></div>
        <div ref={myRef3}></div>
        <div ref={myRef4}></div>
        <div ref={myRef5}></div>
        <div ref={myRef6}></div>
        <div ref={myRef7}></div>
        <button onClick={scrollTo}>回到第二个框</button>
    </div>
  );
}

export default ScrollTest;

.root {
    border: 1px solid #000000;
    width: 1400px;
    height: 200vh;
    padding: 32px;
    margin: 16px;
}

.root div{
    width: 1000px;
    height: 25vh;
    border: 1px solid green;
    margin-bottom: 20px;
}