<ul>
  <li><a href="#section01">SECTION 01</a></li>
  <li><a href="#section02">SECTION 02</a></li>
  <li><a href="#section03">SECTION 03</a></li>
</ul>

<section id="section01">SECTION 01</section>
<section id="section02">SECTION 02</section>
<section id="section03">SECTION 03</section>

ul{
  display: flex;
}
li{
  width: 50%;
}
a{
  display: block;
  font-size: 2vw;
  font-weight: bold;
  color: #000;
  background: #ccc;
  text-align: center;
  text-decoration: none;
  padding: 20px 0;
}
a:hover{
  color: #fff;
  background: #000;
}
section{
  height: 500px;
  font-size: 5vw;
  font-weight: bold;
  padding: 50px 25px;
}
#section01{
  background: #36C288;
}
#section02{
  background: #F6EFC3;
}
#section03{
  background: #BAC6FF;
}

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});