JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<header>My List</header>
<div id="scrolling">
<ul class="menu">
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <li><a href="#e">E</a></li>
    <li><a href="#f">F</a></li>
    <li><a href="#g">G</a></li>
    <li><a href="#h">H</a></li>
    <li><a href="#i">I</a></li>
    <li><a href="#j">J</a></li>
    <li><a href="#k">K</a></li>
    <li><a href="#l">L</a></li>
    <li><a href="#m">M</a></li>
    <li><a href="#n">N</a></li>
    <li><a href="#o">O</a></li>
    <li><a href="#p">P</a></li>
    <li><a href="#r">R</a></li>
    <li><a href="#s">S</a></li>
    <li><a href="#t">T</a></li>
    <li><a href="#u">U</a></li>
    <li><a href="#v">V</a></li>
    <li><a href="#w">W</a></li>
    <li><a href="#z">Z</a></li>
</ul>
<ul class="list">
    <li class="divider" id="a">A</li>
    <li><div ><div ><a href="#"><h3 >Amelia Webster</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Andrew WifKinson</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Archibald Carrington</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Ariana Clapton</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Ashley Carter</h3></a></div></div></li>
    <li class="divider" id="b">B</li>
    <li><div ><div ><a href="#"><h3 >Barney Mercer</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Barry Goodman</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Brenda Brown</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Brooke Creighton</h3></a></div></div></li>
    <li class="divider" id="c">C</li>
    <li><div ><div ><a href="#"><h3 >Camilla Kapinksy</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Caroline Miller</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Charlotte Gardner</h3></a></div></div></li>
    <li><div ><div ><a href="#"><h3 >Cynthia Monroe</h3></a></div></div></li>
    <li class="divider" id="e">E</li>
    <li><div ><div ><a...

CSS

* {
    margin: 0; padding: 0; -webkit-box-sizing: border-box;
}
body {
    font-family: helvetica neue, helvetica, sans-serif;
    height: 100%;
    overflow: hidden;
}
a {
    text-decoration: none;
    color: #0033cc;
}
ul, li {
    list-style: none;
    vertical-align: middle;
}
ul.list {
    padding-left: 20px;
}
.menu {
    position: fixed;
    right: 0;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    z-index: 2;
    top: 58px;
}
.list li {
    border-bottom: 1px solid #eee;
    line-height: 44px;
    height: 44px;
}
.list .divider {
    font-size: 20px;
    font-weight: bold;
    background: #fafafa;
    box-shadow: -60px 0 0 #fafafa;
    line-height: 28px;
    height: 28px;
    margin-top: -1px;
    position: -webkit-sticky;
    top: 44px;
}
header {
    line-height: 44px;
    height: 44px;
    background: rgba(255,255,255,0.95);
    width: 100%;
    position: fixed;
    text-align: center;
    box-shadow: 0 1px 0 #fafafa;
}
#scrolling {
    padding-top: 44px;
    overflow: scroll;
    -webkit-overflow-scroll: touch;
    height: 100%;
}

JavaScript

$(function() { $(window).on("touchstart mouseover click", ".menu a", function(e) {
    e.preventDefault();
    clearInterval(t);
    var target = $( $(this).attr("href") ).next("li");
    var scroller = $("#scrolling")[0];
    var startScroll = scroller.scrollTop;
    var destination = target[0].offsetTop - 68;
    var step = parseInt((destination - startScroll)/25);
    var steps = 25;
    var stepno = 0;
        setInterval( function() {
            if ( stepno++ <= steps  ) {
                scroller.scrollTop += step;
            } else {
                clearInterval(t)
            }
        }, 20);
    });
    
});