JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#demo" class="uruna">click</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box">Nothing</div>
<div class="box" id="demo">Nothing</div>

CSS

.box{
    
padding: 20px;
    margin: 10px;
    background:#ddeecc;
    display:block;
    width:100%;
}

JavaScript

function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});