JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<ul id="navMenu">
    <li id="navAbout" class="navAbout" style="height:800px;background-color:#0e53e7">
         <h1>about</h1>

    </li>
    <li id="navWork" class="navWork" style="height:800px;background-color:#ffc700">
         <h1>work</h1>

    </li>
    <li id="navContact" class="navContact" style="height:800px;background-color:#ff5c00">
         <h1>tact</h1>

    </li>
</ul>
<ul id="petmenu">
    <li data-pet="cat"><a href="#cat">1</a></li>
    <li data-pet="dog"><a href="#dog">2</a></li>
    <li data-pet="fish"><a href="#fish">3</a></li>
    <li data-pet="fish1"><a href="#fish1">4</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

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 );
        });
    }
});