JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#idElement1">not smooth to 1</a>
<a href="#idElement2">not smooth to 2</a>
<a id="link3" href="#idElement3">Scroll smoth to headline 3</a>
<a href="#idElement4">not smooth 4</a>
<br />
<a id="link1" href="#">smooth link1</a><br/>

<h2 id="idElement1">Element1</h2>
<div class="largeBox">
    <h4><a href="http://api.jquery.com/scrolltop/">.scrollTop()</a></h4>
    <p>Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.</p>
 
    <h4><a href="http://api.jquery.com/animate/">animate</a></h4>    
    <p>Perform a custom animation of a set of CSS properties.</p>    
    Some Lorem ipsum</div>


<h2 id="idElement2">Element2</h2>
<div class="largeBox">Some Lorem ipsum</div>


<h2 id="idElement3">Element3</h2>
<div class="largeBox">Some Lorem ipsum</div>

<h2 id="idElement4">Element4</h2>
<div class="largeBox">Some Lorem ipsum</div>

<h2 id="idElement5">Element5</h2>
<div class="largeBox">Some Lorem ipsum</div>

CSS

.largeBox { height: 200px; border: 1px solid red;}

JavaScript

// $(document).ready(function() {
   // code could go here
// });



$('#link1').click(function() {
    // $('#link1').animate(cssProperties , 5000);
    $("html, body").animate({ scrollTop: "300px" });
    return false; 
});

$('#link3').click(function(){
    var el3offset = $("#idElement3").offset().top;
    console.log('el3Offset', el3offset);
    $('html, body').animate( {scrollTop: el3offset });
    return false;
});