JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
  <div id="container">
    <div id="nav">
      <a href="#top" id="nav_t">top</a><br />
      <a href="#middle" id="nav_m">middle</a><br />
      <a href="#bottom" id="nav_b">bottom</a>
    </div>
    <div id="main" role="main">
        <div id="top"><h2>top</h2></div>
      <div id="middle"><h2>middle</h2></div>
      <div id="bottom"><h2>bottom</h2></div>
    </div>
  </div>

CSS

html {
    overflow:hidden;
}
body {
    color:#fff;
}
#nav {
    width:20%;
    height:100%;
    top:0;
    left:0;
    margin-left:40px;
    position:fixed;
    z-index:1;
    background:rgba(255,255,255,.7);
    display:block;
}
#top {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    display:block;
    background:rgba(0,0,0,1);
}
#middle {
    width:100%;
    height:100%;
    top:100%;
    left:100%;
    position:absolute;
    display:block;
    background:rgba(0,0,0,.7);
}
#bottom {
    width:100%;
    height:100%;
    top:200%;
    left:200%;
    position:absolute;
    display:block;
    background:rgba(0,0,0,.5);
}

JavaScript

$(document).ready(function(){
    $('#nav a').click(function(){
        $.scrollTo(this.hash, 800);
        return false;
    });
});