JSFiddle - React, Tailwind, and code Playground

HTML

<div id="photos-div" style="overflow:auto;width:500px;height:240px;">
<ul id="photos-li">
    <li http://jsfiddle.net/YD9s5/5/#updateid="photo-li-0"></li>
    <li id="photo-li-1"></li>
    <li id="photo-li-2"></li>
    <li id="photo-li-3"></li>
    <li id="photo-li-4"></li>
    <li id="photo-li-5"></li>
    <li id="photo-li-6"></li>
    <li id="photo-li-7"></li>
    <li id="photo-li-8"></li>
</ul>
</div>
<div id="clearfooter"></div>
<div id="fixed">
    <div id="scroll-next" class="menu-button">SCROLL<BR>DOWN</div>
</div>

CSS

ul {
		    list-style-type: none;
		}
		li {
		    background-color: gray;
		    height: 200px;
		    width: 400px;
		    //margin: 40px;
		    border: 1px solid black;
		}
		#fixed {
		    height:150px;
		    background: #666;
		    position: fixed;
		    bottom:0;
		    width: 100%
		}
		#clearfooter {
		    height : 410px;
		}
		.menu-button {
		    font-size: 30px;
		    border-radius: 5px;
		    float: left;
		    background-color:silver;
		    height: 100px;
		    width: 150px;
		    margin: 15px;
		    text-align: center;
		}

JavaScript

var pindex = 1;

		$(document).ready(function () {
		    var pcount = $("#ul-photos").children().length;
		    setCount(pcount);
		});

		function setCount(count) {
		    pcount = count;
		}

		function scrollToElement(i) {

		    $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);
            
		}

		$("#scroll-next").click(function () {
		    console.log(pindex);
		    scrollToElement(pindex);
		    setIndex(pindex + 1);
		});

		function setIndex(i) {
		    pindex = i;
		}