JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
 <a href="#i">•</a><br>
 <a href="#ii">•</a><br>
 <a href="#iii">•</a><br>
 <a href="#iv">•</a><br>
 <a href="#v">•</a><br>
 <a href="#vi">•</a><br>
 <a href="#vii">•</a><br>
 <a href="#viii">•</a><br>
 <a href="#ix">•</a><br>
 <a href="#x">•</a><br>
 <a href="#xi">•</a><br>
 <a href="#xii">•</a><br>
 <a href="#xiii">•</a><br>
</div>

CSS

#navigation {
    position: fixed;
    top: 50%;
    margin-top: -140px;
    right: 10px;
    z-index: 1000;
    text-align: center;
    width: 180px;
    font-size: 20px;
    z-index: 9999;
}

#navigation a:link {
    color: #aaa;
    text-decoration: none;
}

#navigation a:hover {
    color: #000;
    text-decoration: none;
}

#navigation a:active {
    color: green;
    text-decoration: none;
}

JavaScript

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});