scrollBy

HTML

<div id="liens">
  <button onclick="myScrollTo('a');">A</button>
  <button onclick="myScrollTo('b');">B</button>
  <button onclick="myScrollTo('c');">C</button>
  <button onclick="myScrollTo('d');">D</button>
  <button onclick="myScrollTo('e');">E</button>
</div>
<section id='a'>
  <div>A</div>
</section>
<section id='b'>
  <div>B</div>
</section>
<section id='c'>
  <div>C</div>
</section>
<section id='d'>
  <div>D</div>
</section>
<section id='e'>
  <div>E</div>
</section>

CSS

div {
  height: 500px;
  background: #ccc;
  margin: 10px;
  padding-top: 52px;
  font-size: 5em;
}

button {
  padding: 1em;
  border: 2px solid black;
}
#liens {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: auto;
    margin: 0;
    background: #fff;
    font-size: 15px;
    padding: 10px;
}

JavaScript

function myLastScrollTo(id) {
  var e = document.getElementById(id);
  var box = e.getBoundingClientRect();
  window.scrollBy(0, box.top);
}

function myScrollTo(id) {
  var e = document.getElementById(id);
  var box = e.getBoundingClientRect();
  var k, inc;
  inc = (box.top >= 0) ? 1 : -1;
  for (k = 0; k < 49; k++) setTimeout("window.scrollBy(0," + Math.floor(box.top / 50) + ")", 10 * k);
  setTimeout("myLastScrollTo('" + id + "')", 500);
}