用纯js锚定滚动？

Question

所以我能找到的所有解决方案都使用jQuery。我知道使用jQuery可能更容易，但是有没有人知道一个纯粹的Javascript滚动方法？

Codepen入门：http://codepen.io/mildrenben/full/Kwwdzb/[1][1]

HTML：

<nav>
   <ul>
     <li><a href="#section-one">Section One</a></li>
     <li><a href="#section-two">Section Two</a></li>
     <li><a href="#section-three">Section Three</a></li>
     <li><a href="#section-four">Section Four</a></li>
     <li><a href="#section-five" id="link">Section Five</a></li>
  </ul>
</nav>
<main>
  <h1 id="section-one">SECTION ONE</h1>
  <h1 id="section-two">SECTION TWO</h1>
  <h1 id="section-three">SECTION THREE</h1>
  <h1 id="section-four">SECTION FOUR</h1>
  <h1 id="section-five">SECTION FIVE</h1>
</main>

CSS：

html, body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  font-family: sans-serif;
}

h1 {
  margin-bottom: 300px;
}

nav {
  width: calc(20% - 60px);
  height: calc(100% - 60px);
  background: aquamarine;
  float: left;
  padding: 30px;
  overflow-y: scroll;
}

nav ul {
  list-style: none;
}

nav li {
  margin: 30px 0;
}

main {
  width: calc(80% - 60px);
  height: calc(100% - 60px);
  background: darkseagreen;
  float: left;
  overflow-y: scroll;
  padding: 30px;
}

main p {
  width: 35%;
  margin: 10px 0 70px;
}