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

html {
  scroll-behavior: smooth;


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

const top= useRef();

assign to this here:

    <div ref={top}/>


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 = () => {
      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

      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>
       <button onClick={toElemnt}>Back to Element <span>&#8593;</span></button>
      <button onClick={toTop}>Back to to <span>&#8593;</span></button>

ReactDOM.render(<App />, document.getElementById("root"))
<script crossorigin src=""></script>
<script crossorigin src=""></script>
<div id="root"></div>

Related Query

More Query from same tag