JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

<nav> <a href="#page-1" class="scrollitem selected">page 1</a>
 <a href="#page-2" class="scrollitem">page 2</a>
 <a href="#page-3" class="scrollitem">page 3</a>

<a href="#page-4" class="scrollitem">page 4</a>

</nav>
<div class="wrapper">
    <div id="page-1" class="page currentpage">
        <div class="page-container">
             <h3>page 1</h3>

            <div>Simulated content heigher than 100%</div>
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    overflow-x:hidden;
    position:relative;
}
nav {
    position:absolute;
    top:0;
    left:0;
    height:30px;
    z-index: 1000;
}
.wrapper {
    background: #263729;
    position: relative;
    width: 600px;
    height: 500px;
    overflow: hidden;
}
.page {
    position: absolute;
    background: #992213;
    min-height: 100%;
    padding-top: 30px;
    width: 100%;
}
/*.currentpage{
border: 3px solid yellow;
}*/
#page-1 {
    background: #0C717A;
}
#page-2 {
    background: #009900;
}
#page-3 {
    background: #0000FF;
}
a {
    color:#FFF;
}
a.selected {
    color: red;
}

JavaScript

function slideToPage($page){
    var $wrapper = $('.wrapper');
    var width = $wrapper.outerWidth();
    var height = $wrapper.outerWidth();
    
    // Set size of all children and stop previous animations
    $wrapper.children().css({width: width, height: height}).stop();
    
    // Find the current page (positioned at 0)
    var $currentpage = $wrapper.find('.currentpage');
    if ($page.is($currentpage)){
        console.log("Stay on current page");
        return;
    }
    console.log("$currentpage.index() " + $currentpage.index());
    console.log("$page.index() " + $page.index());
    
    // Is the new page index before or after (left or right scroll)
    var slideRight = $page.index() > $currentpage.index();
    var delta = slideRight ? 1 : -1;
    
    // Position offscreen (to left or right of the screen)
    $page.css({left: delta * width});
               
    // Animate new panel to positon 0
    $page.animate({left: 0}, 1000).show();
    
    // Animation old panels offscreen (left or right) then hide
    $currentpage.animate({left: -delta * width}, 1000, function(){
        $currentpage.hide();
    });
    
    $currentpage.removeClass('currentpage');
    $page.addClass('currentpage');
    
    // hide all other pages (just to be sure)
    $wrapper.children().not($currentpage).not($page).hide();
}

// Use wrapped DOM ready event to provide local $ for jQuery
jQuery(function ($) {
    $('.scrollitem').on('click', function () {
        var $link = $(this);
        var target = $link.attr('href').substr(1);

        // If the div has any content it is "loaded" (if you know the page has child elements use children().length as it will be faster)
        var $page = $('#' + target);
        var $target = $page.find('.page-container');
        if ($target.html().length) {
            console.log('loaded');
            slideToPage($page);
        } else {
            // Dummy test code - REMOVE THIS
            $target.html("I AM LOADED:" + target +...