How to make a button for smooth scrolling to the top of the page (React)?

Question

React

Guys, a trivial question is how to make a smooth scroll button in React. I did something like this:

import React from 'react';
import './BtnScrollUp.scss'

function BtnScrollUp() {
  
  const handlerScrollUp = () => {
    if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
      window.scrollBy(0, -50);
      setTimeout(handlerScrollUp, 10);
    }
  }
  
  return (
    <div className={'btn-scroll-up'} onClick={handlerScrollUp}>&#9650;</div>
  );
}

export default BtnScrollUp;

But I want to make a more beautiful solution, I don’t want to directly knock on the DOM.

Answer 1

No recursive timeouts needed. Just one challenge.

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth',
});