JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-floating-bar"> <!-- Menubar -->
<div class="row">
  <div class="column grid_12">
    <div class="fixed-bar-buttons">
      <ul>
        <a href="#top" class="goto"><li>Home</li></a>
        <a href="#links" class="goto"><li>Links</li></a>  
        <a href="#resume" class="goto"><li>Resume</li></a>
        <a href="#social" class="goto"><li>Social</li></a>
      </ul>
    </div>
  </div>
</div>
</div> <!-- End the Menubar -->

<br><br><br><br><br>
<a name="top"/> Top Section
<br><br><br><br><br><br><br><br>

<a name="links"/> Links Section
<br><br><br><br><br><br><br><br>

<a name="resume"/> Resume Section
<br><br><br><br><br><br><br><br>

<a name="social"/> Social Section
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

CSS

#top-floating-bar
{
position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100; height:35px;
}

JavaScript

$(function() {
     $(".goto").click(function() {
      var target = $(this).attr("href")
      target = target.substring(1,target.length);
      $(window).scrollTop($('a[name="'+target+'"]').offset().top - 35); 
      return false; 
    });
});