JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<ul id="pets">
    <li class="cat" style="height:800px;background-color:#0e53e7">
         <h1>^-ω-^</h1>

    </li>
    <li class="dog" style="height:800px;background-color:#ffc700">
         <h1>૮( ᵒ̌ૢ௰ᵒ̌ૢ )ა</h1>

    </li>
    <li class="fish" style="height:800px;background-color:#ff5c00">
         <h1>&lt;")))>&lt;</h1>

    </li>
</ul>
<ul id="petmenu">
    <li data-pet="cat">Cat</li>
    <li data-pet="dog">Dog</li>
    <li data-pet="fish">Fish</li>
</ul>

CSS

div {
    height: 200px;
}
ul, li {
    list-style-type:none;
    margin:0;
    padding:0;
}
ul#petmenu {
    border:1px dashed #000;
    width:100px;
    height:100px;
    line-height:30px;
    position:fixed;
    top:20px;
    right:20px;
    padding:10px;
    background-color:#dedede;
}
#petmenu li {
    cursor:pointer;
}
}

JavaScript

function scrollTo(to, time) {
    var start = new Date().getTime(),
        begin = document.body.scrollTop,
        end = to.offsetTop,
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            document.body.scrollTop = (begin + step * (end - begin));
            if (step == 1) clearInterval(timer);
        }, 25);
}

document.addEventListener("DOMContentLoaded", function () {
    var petmenu = document.querySelectorAll("#petmenu li");
    for(var i=0,len=petmenu.length;i<len;i++) {
        petmenu[i].addEventListener("click", function(e) {
            var target = document.getElementsByClassName( e.toElement.dataset.pet )[0];
            scrollTo( target, 800 );
        });
    }
});