<style type="text/css">
html, body, div, ul, li, a, h1 {margin: 0; padding: 0}
a:active, a:focus {outline: 0}
ul {list-style: none}
a, a:visited {color: black}
a:hover, a.active {background: gray}
a:hover, a:active {text-decoration: none}
.navBox {position: fixed; width: 100%; top: 0; background: lightgray}
.nav {text-align: center}
.nav .item {display: inline-block; *display: inline; *zoom: 1}
.nav .ref, .sidebar .ref {display: block; text-decoration: none; font: normal 20px/50px Arial; padding: 0 20px; text-transform: uppercase}
.main {margin-top: 50px}
.section {height: 1000px; border: 1px solid black; margin-top: 20px}
.subSection {height: 500px; margin-top: 461px; border: 1px solid green}
.sidebar {position: fixed; right: 0; background: lightgray}
.section {
padding-top: 60px;
}
</style>
<body>
<div class="navBox">
<ul class="nav">
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block1">block1</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block2">block2</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#block3">block3</a></li>
</ul>
</div>
<ul class="sidebar">
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div1">Div1</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div2">Div2</a></li>
<li class="item"><a class="ref" href="$(selector).waypoint(offset).html#Div3">Div3</a></li>
</ul>
<div class="main">
<div class="section" id="block1">
<h1>block1</h1>
<div class="subSection" id="Div1">
<h1>Div1</h1>
</div>
</div>
<div class="section" id="block2">
<h1>block2</h1>
<div class="subSection" id="Div2">
<h1>Div2</h1>
</div>
</div>
<div class="section" id="block3">
<h1>block3</h1>
<div class="subSection" id="Div3">
<h1>Div3</h1>
</div>
</div>
</div>
</body>
<script>
document.addEventListener("click", function (e) {
var target = e.target;
if (target.className == "ref") {
e.preventDefault();
var index = Array.prototype.indexOf.call(document.getElementsByClassName("ref"), target);
document.querySelectorAll(".section")[index].scrollIntoView();
}
});
</script>