JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<ul id="pets">
    <li id="cat" class="cat" style="height:800px;background-color:#0e53e7">
         <h1>^-ω-^</h1>
 <li id="cat" class="cat" style="height:800px;background-color:#0e53e7">
         <h1>^-ω-^</h1>
    </li>
    <li id="dog" class="dog" style="height:800px;background-color:#ffc700">
         <h1>૮( ᵒ̌ૢ௰ᵒ̌ૢ )ა</h1>

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

    </li>
</ul>
<ul id="navMenu">
    <li data-mainMenu="home"><a href="#navHome">home</a></li>
    <li data-mainMenu="about"><a href="#navAbout">about</a></li>
    <li data-mainMenu="work"><a href="#navWork">work</a></li>
    <li data-mainMenu="contact"><a href="#navContact">contact</a></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;
}
a {
    text-decoration:none;
    color:inherit;
}

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 a");
    for(var i=0,len=petmenu.length;i<len;i++) {
        petmenu[i].addEventListener("click", function(e) {
            e.preventDefault();
            var target = document.querySelector(this.getAttribute("href"));
            scrollTo( target, 800 );
        });
    }
});