JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<!DOCTYPE html>
<html>
    
    <body>
        <div id="container">
            <div data-role="page">
                <div data-role="header" data-position="fixed">
                     <h1>Plain jQuery Mobile</h1>

                </div>
                <div data-role="content" class="scrollable">
                    <ul data-role="listview">
                        <li> <a href="#" id="scroll-down">Click to scroll down</a></li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li id="bingo">Bingo!!!</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

</html>

JavaScript

$('#scroll-down').click(function() {
   $('html, body').animate({scrollTop: $('#bingo').offset().top}, 2500); 
});