Плавный скролл к элементам на чистом JS

Есть множество решений скролла (прокрутки) на jQwery, но если вы ее не используете то устанавливать ради скролла огромную библиотеку нет смыла, поэтому я решил написать небольшой урок, как сделать плавный scroll на чистом JS без jQwery.

К примеру у нас есть простенькое меню с якорями

<ul id="nav">
 <li><a href="#aboutus">О нас</a></li>
 <li><a href="#products">Товары</a></li>
</ul>

Ну и соответственно сами якоря (на странице)

<div id="aboutus">Контент о компании</div>
<div id="products">Товары</div>

Для плавного скролла подключаем к документу следующий скрипт

<script>
function anim(duration) {
    var temp;
    return function(sel) {
        cancelAnimationFrame(temp);
        var start = performance.now();
        var from = window.pageYOffset || document.documentElement.scrollTop,
        to = document.querySelector(sel).getBoundingClientRect().top;
        requestAnimationFrame(function step(timestamp) {
            var progress = (timestamp - start) / duration;
            1 <= progress && (progress = 1);
            window.scrollTo(0, from + to * progress | 0);
            1 > progress && (temp = requestAnimationFrame(step))
        })
    }
};
var scrollMenu = anim(2000)
</script>

и для того чтобы все начало работать немного модифицируем разметку меню

<ul id="nav" onclick="event.preventDefault()">
    <li><a href="#aboutus" onclick="scrollMenu('#aboutus')">О компании</a></li>
    <li><a href="#products" onclick="scrollMenu('#products')">Товары</a></li>
</ul>

Посмотреть живой пример.