JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<script src="https://gist.github.com/raw/050c0b54abb4b51d1bd5/5e787781065318d707de22a47dc87563d8197f35/jquery.scrollTo-min.js"></script>
<div id="articles">
    <ul>
        <li>  
            <article>
                <a href="elements.php"><h1>Beta Site Work Begun</h1></a>
                
                <img src="img/cross.png" name="crossbutt" width="50" height="40" id="crossbutt" />
                <p id="pup">I thought I'd join in with the BBC and start work on my own beta site .      It's early days but I'm starting to get a feel for the design and which new tech I'm going   to use. The background for this first incarnation was made using Justin Windle's awesome   Super Recursion Toy and edited in PS.</p>
                <h3>HTML, PHP, CSS</h3>
            </article>
        </li>
        <li>
            <article>
                <a href="elements.php">
                    <h1>Test to test to test</h1></a>
                <img src="img/cross.png" width="50" height="40" id="crossbutt" />
                <p id="pup">Test the test to test the test compare .</p>
                <h3>HTML, PHP, CSS</h3>
            </article>
        </li>
        <li>
            <article>
                <a href="elements.php">
                    <h1>Test to test to test2</h1></a>
                <img src="img/cross.png" width="50" height="40" id="crossbutt" />
                <p id="pup">Test the test to test the test compare test.</p>
                <h3>HTML, PHP, CSS</h3>
            </article>
        </li>
        <li>
            <article>
                <a href="elements.php">
                    <h1>Test to test to test3</h1></a>
                <img src="img/cross.png" width="50" height="40" id="crossbutt" />
                <p id="pup">Test the test to test the test compare .</p>
                <h3>HTML, PHP, CSS</h3>
            </article>
        </li>
        <li>
            <article>
                <a href="elements.php">
                    <h1>Test to...

CSS

body { overflow: hidden; }

JavaScript

var current = current = $('#articles ul li').first();
$('body').height($('body').outerHeight() * 2 - $('#articles ul li').last().height());
$(window).keydown(function(e) {
    if (e.which === 40) { // down
        current = current.next().length === 0 ? current : current.next();
    } else if (e.which === 38) { // up
        current = current.prev().length === 0 ? current : current.prev();
    } else {
        return;
    }
    if (!current || current.length === 0) {
        current = $('#articles ul li').first();
    }
    
    $('body').scrollTo(current, 150);
    return false;
});