JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<div id="photos-div" style="overflow:auto;width:500px;height:240px;">
    <ul id="photos-li">
        <li id="photo-li-0">0</li>
        <li id="photo-li-1">1</li>
        <li id="photo-li-2">2</li>
        <li id="photo-li-3">3</li>
        <li id="photo-li-4">4</li>
        <li id="photo-li-5">5</li>
        <li id="photo-li-6">6</li>
        <li id="photo-li-7">7</li>
        <li id="photo-li-8">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;
		});

		function scrollToElement(i) {
		    console.log($('#photo-li-0').offset());
		    if ($('#photo-li-' + i).length) {
		        var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top;
		        $('#photos-div').scrollTop(newpos);
		        return i + 1;
		    };
		    /* else */ return i;
		}

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