JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a id="link" href="#services">Services</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</div>
<div id="content">
<div class="home_content">
<p><a name="home">HOME</a></p>
</div>

<div class="home_content">
<p><a name="services">SERVICES</p>
</div>

<div class="home_content">
<p><a name="contact">CONTACT US</p>
</div>

</div>
</div>

CSS

body {width:100%; margin:0; padding:0;}
#wrapper {width:1000px; height:auto; margin:0 auto; text-align:left;}
#menu {width:100%; height:auto;}
#menu ul {overflow:hidden; margin:0; padding:0;}
#menu ul li {list-style-type:none; float:left; padding:0 5px 0 5px; }
.home_content {height:400px;}

JavaScript

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$("#link").click(function() {
   scrollToAnchor('services');
});