JSFiddle - React, Tailwind, and code Playground

by martyk

HTML

<div class="buttons">
    <button id="4" class="buttoni">Goto space</button>
    <button id="3" class="buttoni">Goto stratosphere</button>
    <button id="2" class="buttoni">Goto sky</button>
    <button id="1" class="buttoni">Goto ground</button>
</div>
  <div class="space area" id="a4">

  </div>
  <div class="stratosphere area" id="a3">

  </div>
  <div class="sky area" id="a2">

  </div>
  <div class="ground area" id="a1">

  </div>

CSS

body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }

 .area {
     height: 630px; border: 0px solid red; background: no-repeat; margin-bottom: 0px; width: 99.9%; overflow: hidden; 
    }
.space { background: url(http://www.bing.com/az/hprichbg/rb/WhiteTippedRose_ROW10477559674_1366x768.jpg) no-repeat; }
.stratosphere { background: url(http://www.bing.com/az/hprichbg/rb/FloridaMileBridge_ROW10266017896_1366x768.jpg) no-repeat; }
.sky { background: url(http://www.bing.com/az/hprichbg/rb/RakovSkocjan_ROW7760458111_1366x768.jpg) no-repeat; }
.ground { background: url(http://www.bing.com/az/hprichbg/rb/LakeSassolo_ROW8635080354_1366x768.jpg) no-repeat; }

.scrolldown.scrollto-a2 #a1,
.scrolldown.scrollto-a3 #a1, .scrolldown.scrollto-a3 #a2,
.scrolldown.scrollfrom-a3 #a4,
.scrolldown.scrollfrom-a2 #a4, .scrolldown.scrollfrom-a2 #a3,
.scrollup.scrollto-a3 #a4,
.scrollup.scrollto-a2 #a4, .scrollup.scrollto-a2 #a3,
.scrollup.scrollfrom-a2 #a1,
.scrollup.scrollfrom-a3 #a1, .scrollup.scrollfrom-a3 #a2
    { background: none; }

.buttons { position: absolute; }
.buttoni { display:inline-block; float:left; }

 a { text-decoration: none; }
 h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }

 #top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
 #navigation { float: right; height: 100%; }
 #bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
 #sceneSelection { top: 20%; position: fixed; padding: 10px; }
 #info { margin-top: 50px; margin-bottom: 50px; }
 .box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }

 .nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block; ...

JavaScript

function getScrollerSelector() {
	var $body = $("<body/>");
    $body.scrollTop(1);
    return $body.scrollTop() == 1 ? "body" : "html";
}
scrollerSelector = getScrollerSelector();

function getScrollFrom(direction) {
    var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var tolerance = 2;             // ignore minimal overlappings invisible to human eye
    var scrollFrom;
    if (direction == "down") {
        scrollFrom = $("#a4");
        $(".area").each(function(i) {
            var top = $(this).offset().top;
            if (top <= (currentScrollTop + tolerance) &&  top > scrollFrom.offset().top) scrollFrom = $(this);
        });
    } else {
        scrollFrom = $("#a1");
        $(".area").each(function(i) {
            var top = $(this).offset().top;
            if (top >= (currentScrollTop - tolerance) &&  top < scrollFrom.offset().top) scrollFrom = $(this);
        });
    }
    return scrollFrom.attr("id");
}

$(window).scroll(function() {
    var timer = $(this).data("scrollEndTimer");
    if (timer) clearTimeout(timer);
    $(this).data(
        "scrollEndTimer",
        setTimeout(function() {
            var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            $(".buttons").css("top", currentScrollTop );
        },200)
    );
});

    function scroll_to(id, speed, margin) {
        var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        var scrollTop = $('#' + id).offset().top - margin;
        var direction = (scrollTop > currentScrollTop ? "down" : "up");
        $("body").addClass("scroll"+direction + " scrollto-"+id + " scrollfrom-"+getScrollFrom(direction));
        //console.log( $("body").attr("class") );
        $( scrollerSelector ).animate({
                 scrollTop: scrollTop
            }, {
                 //easing: 'linear',
                ...