ScrollBy V2

by Simon Hi

HTML

<nav>
  <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>
</nav>
<main>
  <section id='a'>
    A
  </section>
  <section id='b'>
    B
  </section>
  <section id='c'>
    C
  </section>
  <section id='d'>
    D
  </section>
  <section id='e'>
    E
  </section>
</main>

CSS

body {
  color: black;
  background: white;
  padding: 0.5rem;
  margin: 0;
}

nav {
  font-size: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
}

button {
  padding: 1em;
  border: 2px solid black;
}

main {
  margin-top: 3rem;
}

section {
  font-size: 5rem;
  height: 20rem;
  background: #ccc;
  margin-bottom: 3.5rem;
}

JavaScript

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

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