Плавный скролл без jQwery на чистом js

by Олег

HTML

<ul>
    <li><a href="#my1">блок1</a></li>
    <li><a href="#my2">блок2</a></li>
    <li><a href="#my3">блок3</a></li>
</ul>
<div id="my1"></div>
<div id="my2"></div>
<div id="my3"></div>
<!--Любые решения на js, html5, css3 joomla@mail.ru-->

CSS

*{margin:0; padding:0;}
ul{position:fixed;z-index:1;}
li{
  display:inline;
}
div {
  height:100%;
  padding-bottom:100%;
}
#my1{background:#ff0;}
#my2{background:#f00;}
#my3{position:absolute;
width:100%;
height:100%;
background:#009bff;}

JavaScript

var linkNav = document.querySelectorAll('[href^="#"]'),
    V = 1;  // скорость
for (var i = 0; i < linkNav.length; i++) {
  linkNav[i].addEventListener('click', function(e) {
    e.preventDefault();
    var w = window.pageYOffset,  // прокрутка
        hash = this.href.replace(/[^#]*(.*)/, '$1');
        t = document.querySelector(hash).getBoundingClientRect().top,
        start = null;
    requestAnimationFrame(step);
    function step(time) {
      if (start === null) start = time;
      var progress = time - start,
          r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
      window.scrollTo(0,r);
      if (r != w + t) {
        requestAnimationFrame(step)
      } else {
        location.hash = hash
      }
    }
  }, false);
}