smooth scrolling with pure javascript

var smoothScroll = {

  move : function (old, des, actual) {
    easeInOutQuart = function (t) { return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t; };
    actual += 1;
    ease = easeInOutQuart(actual / 100);
    delta = des - old;
    delta *= ease;
    delta += old;
    window.scrollTo(0, delta);
    if (actual < 100) {
      window.requestAnimationFrame(function () {
        smoothScroll.move(old, des, actual);
      });
    }
  },

  linkInit : function (e) {
    e.preventDefault();
    link = e.target.getAttribute("href").substr(1);
    block = document.getElementById(link).offsetTop;
    client = document.documentElement.scrollTop;

    smoothScroll.move(client, block, 0);
  },

  init : function () {
    links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
      link = links[i].getAttribute("href");
      if (link.search("#") == 0 & link.substr(1) != "") {
        links[i].onclick = smoothScroll.linkInit;
      }
    }
  }
};

window.onload = smoothScroll.init;

header {
  position: fixed;
  top: 0;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  height: 3vw;
  line-height: 3vw;
}
header nav ul {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0px auto;
}
header nav ul li {
  list-style: none;
}
header nav ul li a {
  color: black;
  text-decoration: none;
}

.content {
  margin-top: 3vw;
}
.content .block {
  height: 100vh;
  width: 100vw;
  border: 1px solid black;
}

<header>
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>
  </nav>
</header>

<div class="content">
  <div id="one" class="block"></div>
  <div id="two" class="block"></div>
  <div id="three" class="block"></div>
</div>

function getId(e){return document.getElementById(e)}
function showHideBackToTop() {
  var toTop_button = getId("scrollToTop-button");
  var scroll_position = window.pageYOffset;
  if(scroll_position>1000) {
    toTop_button.className = "";
  }
  else{
    toTop_button.className = "unvisible";
  }
}
window.addEventListener("scroll", showHideBackToTop);

function scrollToTop(){
  showHideBackToTop();
  window.scrollBy(0,-200);
  var s_position = window.pageYOffset;
  if(s_position >= 1) {
    setTimeout(scrollToTop, 10);
  }
}

#container {
  position:relative;
}

#header {
  background:#333;
  color:#a7a7a7;
  font-weight:bold;
  font-size:25px;
  padding:30px 30px;
  text-align:center;
}

#content {
  max-width:640px;;margin:20px auto;
  font-size:20px;
  line-height:28px;
  text-align:justify;
  font-family:Cambria,serif;
  font-style:italic;
}

#scrollToTop-button {
  text-decoration:none;
  position:fixed;
  bottom:40px;
  right:40px;
  background:#333;
  color:#a7a7a7;
  width:50px;
  height:50px;
  line-height:50px;
  text-align:center;
  border-radius:100%;
  transition:opacity 1s;
}

.unvisible {
  opacity:0;
}

<div id='container'>
  <div id='header'>
  BACK TO TOP
  </div>
  <div id="content">
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>
Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>Morbi vel maximus nisi, quis tempor ex. In maximus lacus vitae ligula placerat mattis. Maecenas faucibus interdum mauris, non elementum urna. Cras vestibulum tellus nec hendrerit posuere. Suspendisse eget risus sit amet nibh iaculis sagittis. Curabitur lacus diam, rutrum eu sem et, iaculis euismod libero. Cras commodo ante in gravida molestie. Fusce lobortis sem et... <br/><br/>

</div>
  <a id='scrollToTop-button' class='unvisible' href='javascript:void(0)' onclick='scrollToTop()'>TOP</a>
</div>