jump nav

by agib

HTML

<nav class="nav">
  <ul>
    <li><a href="#section43">43</a></li>
    <li><a href="#section110">110</a></li>
    <li><a href="#section176">176</a></li>
  </ul>
</nav>

<main class="main">
<h2 class="heading">1<span id="section1"></span></h2>
<h2 class="heading">2<span id="section2"></span></h2>
<h2 class="heading">3<span id="section3"></span></h2>
<h2 class="heading">4<span id="section4"></span></h2>
<h2 class="heading">5<span id="section5"></span></h2>
<h2 class="heading">6<span id="section6"></span></h2>
<h2 class="heading">7<span id="section7"></span></h2>
<h2 class="heading">8<span id="section8"></span></h2>
<h2 class="heading">9<span id="section9"></span></h2>
<h2 class="heading">10<span id="section10"></span></h2>
<h2 class="heading">11<span id="section11"></span></h2>
<h2 class="heading">12<span id="section12"></span></h2>
<h2 class="heading">13<span id="section13"></span></h2>
<h2 class="heading">14<span id="section14"></span></h2>
<h2 class="heading">15<span id="section15"></span></h2>
<h2 class="heading">16<span id="section16"></span></h2>
<h2 class="heading">17<span id="section17"></span></h2>
<h2 class="heading">18<span id="section18"></span></h2>
<h2 class="heading">19<span id="section19"></span></h2>
<h2 class="heading">20<span id="section20"></span></h2>
<h2 class="heading">21<span id="section21"></span></h2>
<h2 class="heading">22<span id="section22"></span></h2>
<h2 class="heading">23<span id="section23"></span></h2>
<h2 class="heading">24<span id="section24"></span></h2>
<h2 class="heading">25<span id="section25"></span></h2>
<h2 class="heading">26<span id="section26"></span></h2>
<h2 class="heading">27<span id="section27"></span></h2>
<h2 class="heading">28<span id="section28"></span></h2>
<h2 class="heading">29<span id="section29"></span></h2>
<h2 class="heading">30<span id="section30"></span></h2>
<h2 class="heading">31<span id="section31"></span></h2>
<h2 class="heading">32<span id="section32"></span></h2>
<h2 class="heading">33<span...

CSS

* {
  font-family: sans-serif;
  box-sizing: border-box;
}
html,
body{
  padding: ;
  margin: 0;
}
.nav {
  height: 100px;
  width: 100%;
  padding: 1rem;
  background-color: navy;
  position: fixed;
  z-index: 100;
  color: white;
}
.nav > ul {
  list-style-type: none;
}
.nav > ul > li {
  display: inline;
}
.nav a {
  color: white;
  display: inline-block;
  padding: .5rem;
}
.heading {
  position: relative;
}
.main {
  padding: 110px 2rem;
}
.heading > span {
  position: relative;
  display: block; /* this is needed */
  top: -140px;
}