score:-1

You can Use CSS option to set the scroll behavior across the app smooth.

html {
  scroll-behavior: smooth;
}

score:0

If you are using ref then assign it to the target element: 

const top= useRef();

assign to this here: 

return(
    <div ref={top}/>
    {list()}
);

score:4

I'd prefer @Partha Roy solution myself, but if you like more control, use window.scroll()

Try this:

const App = () => {
  
  const elementRef = React.useRef(null)
  
  const toTop = () => {
    window.scroll({
      top: 0,
      left: 0,
      behavior: "smooth"
    })
  }
  // If back to element (use Ref)
  const toElemnt = () => {
     if(!elementRef) return
    // Get element coords from Ref
    const element =
      elementRef.current.getBoundingClientRect().top + window.scrollY

    window.scroll({
      top: element,
      behavior: "smooth"
    })
  }
  
  return (
    <div className="App">
      <div className="content" style={{ height: 1500 }}>Scroll Down <span>&#8595;</span>
      
        <div ref={elementRef} style={{ marginTop: 750 }}>
          Element - continue scrolling <span>&#8595;</span>
        </div>
      </div>
       <button onClick={toElemnt}>Back to Element <span>&#8593;</span></button>
      <button onClick={toTop}>Back to to <span>&#8593;</span></button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>


Related Query

More Query from same tag