JSFiddle - React, Tailwind, and code Playground

by JWells

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div id="myCoolContent" style="height:1000px;width:100%;background-color:red;padding:1em;">
    place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />place cursor in this square and scroll to see how it works
    <br />in a real-life scenario, this would be a page, and not a jsfiddle.</div>
<div
id="myOtherContent" style="height:1000px;width:100%; background-color:silver;padding:1em;">normal page content</div>

JavaScript

//http://www.jermywells.com

//this is a document ready function -- it will run code when dom is loaded.
$(document).ready(function () {
    //this binds the scroll function to the window, so any time the window is scrolled, this function gets fired.
    $(window).scroll(function () {
        //this unbinds the window scroll function, essentially making the scroll function only ever run once.
        $(this).unbind();

        //this nex block is using the scrollTo plugin. http://demos.flesler.com/jquery/scrollTo/ -- it's a badass little plugin.
        //we're saying scroll the $(document) to whatever the .scrollTop() position of the #myOtherContent is (and take 3000 ms to do it)
        $(document).scrollTo("#myOtherContent", 3000, function () {
            //this is a callback function that will fire when the scrollTo has finished.
            $("#myCoolContent").hide();
            //set .scrollTop() position of $(document) to 0, which is basically scroll all the way to the top.
            $(document).scrollTop(0);
        });
    });
});