JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav class="primary-nav">
  <ul>
    <li><a href="http://domainname.com/">Home</a></li>
    <li><a href="http://domainname.com/#about">About</a></li>
    <li><a href="http://domainname.com/#services">Services</a></li>
    <li><a href="http://domainname.com/contact">Contact</a></li>
  </ul>
</nav>

<div class="section">
no name
</div>

<div class="section" id="services">
services
</div>

<div class="section" id="about">
about
</div>

CSS

.section {
  width: 100%;
  height:800px;
  background:orange;
  border:1px solid blue;
}

JavaScript

var duration = 1000;
 var domainname = 'http://domainname.com/';
 
 $('a[href*="#"]').on('click', function (event) {
   var target = $(this).attr('href');
   if (target.length) {
     event.preventDefault();
     
     target = $( target.replace(domainname, '') );
     
     $('html, body').animate({
      	scrollTop: target.offset().top
     }, duration);
   }
  });