<div id="nav">
  <a href="#sec1">Section1</a>
  <a href="#sec2">Section2</a>
  <a href="#sec3">Section3</a>
</div>

<div id="sec1">
  This is section 1
</div>
<div id="sec2">
  This is section 2
</div>
<div id="sec3">
  This is section 3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
body {
  color: #222;
  font: normal normal normal 1rem/1.6 Nunito Sans, Helvetica, Arial, sans-serif;
}
#nav {
  position: fixed;
  top: 0px;
  left: 0px;
}
#nav a {
  padding: 15px;
  background-color: #222;
  color: #fff;
  margin: 2px;
  cursor: pointer;
  border-radius: 2px;
  display: block;
}
#sec1 , #sec2, #sec3{
  padding: 15px;
  margin: 15px 15px 15px 100px;
  border: none;
  height: 1000px;
  border-radius: 2px;
  font-weight: 700;
}
#sec1 {
  margin-top: 0;
  background-color: #fe4a49;
}
#sec2 {
  background-color: #2ab7ca;
}
#sec3{
  background-color: #fed766;
}
$(document).ready(function() {
  $("a[href*='#']:not([href='#])").click(function() {
    let target = $(this).attr("href");
    $('html,body').stop().animate({
      scrollTop: $(target).offset().top
    }, 1000);
    event.preventDefault();
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.