Бесконечный переход по блокам без якорей

Jquery

by Denis Tverdokhlebov

HTML

<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>

CSS

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";
}

JavaScript

$(document).ready(function() {
  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);
});