malefikus13,
бесконечно в любую сторону и без якорей.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 100%;
line-height: 1.4;
}
body {
font-family: 'Roboto', Verdana, sans-serif;
color: #fff;
}
.way section {
display: block;
width: 100%;
height: 100vh;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.naver {
width: 100%;
position: fixed;
top: 10px;
left: 0;
}
.naver ul {
margin: 0;
padding: 0;
position: absolute;
top: 0px;
left: calc(50% - 65px);
list-style: none;
}
.naver ul li {
display: inline-block;
vertical-align: top;
font-weight: bold;
}
.naver ul li{
color: #fff;
border-radius: 5px;
background: #31b0d5;
border: 1px solid #269abc;
display: inline-block;
vertical-align: top;
padding: 4px 17px;
text-transform: capitalize;
}
.way section:nth-child(1) {
background: #51AE51;
}
.way section:nth-child(2) {
background: #9999FA;
}
.way section:nth-child(3) {
background: #99FAD6;
}
.way section:nth-child(4) {
background: #C7FA99;
}
.way section:nth-child(5) {
background: #9AAA8B;
}
.way section:nth-child(6) {
background: #EA8383;
}
#arrow_top:after{
content: "\21D1";
}
#arrow_bot:after{
content: "\21D3";
}
</style>
</head>
<body>
<nav class="naver">
<ul>
<li id="arrow_top"></li>
<li id="arrow_bot"></li>
</ul>
</nav>
<div class="way">
<section >lorem1</section>
<section >lorem2</section>
<section >lorem3</section>
<section >lorem4</section>
<section >lorem5</section>
<section >lorem6</section>
</div>
<script>
var items = document.querySelectorAll("section"), len = items.length;
function fn(b) {
var a = 0;
return function(c) {
"current" != c && (c ? (a--, 0 > a && (a = b - 1)) : (a = ++a % b));
return a
}
};
var fn = fn(len);
function fnShow(a)
{
items[fn(a)].scrollIntoView();
return false
}
document.querySelector("#arrow_top").addEventListener("click", function() {
fnShow(true)
}, false);
document.querySelector("#arrow_bot").addEventListener("click", function() {
fnShow(false)
}, false);
</script>
</body>
</html>