JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="main">
<p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci eget magna ultricies faucibus. In porttitor semper massa eget pulvinar. Donec non turpis lectus, vitae vehicula dolor. Mauris vel turpis ut lorem porta eleifend eu a risus. Nunc tincidunt posuere elit, et rhoncus velit tempus nec. Sed eros tortor, tincidunt at feugiat pretium, accumsan sit amet erat. Curabitur libero diam, fermentum non consectetur tempus, lacinia nec erat. Fusce suscipit faucibus orci, et interdum est hendrerit eu. Phasellus sit amet tellus sed nisi pharetra elementum sit amet in sem. Quisque commodo, turpis vitae commodo tempor, lorem erat suscipit nunc, ac rutrum nunc dui quis orci. Sed eget leo erat, at egestas dolor. Morbi non lacus nisl. Donec aliquam lobortis justo nec auctor. Donec quis massa quis leo elementum lacinia.
    </p>
    <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum

Nunc lacus ligula, posuere et laoreet sit amet, mattis quis sem. Vivamus vehicula, purus ac bibendum hendrerit, purus mauris feugiat nunc, sed tempor mauris orci ultrices libero. Curabitur accumsan nisi vel mi commodo pellentesque. Quisque placerat, sapien et pretium consectetur, lectus justo rhoncus neque, at lobortis tortor enim at neque. Suspendisse magna lorem, tempus vitae tempus eu, malesuada id nunc. Pellentesque id mattis odio. Morbi commodo, tortor nec ultrices convallis, nunc nisl tristique lectus, vitae venenatis turpis arcu eu justo. Nam ac dolor lectus. Sed neque dolor, consequat nec porttitor id, imperdiet id sem. Suspendisse ac odio lacus. Nulla facilisi. Morbi eget sapien a quam egestas consequat sed ut leo. Suspendisse nec nisi mauris. Proin nulla purus, malesuada sed rhoncus non, feugiat...

CSS

html, body {
    min-height:100%;
}

p {margin:1em;}

#loading {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1000;
    background:#888;
    text-align:center;
}

#loading:before {
    content:'loading...';
    position:absolute;
    top:50%;
    width:100%;
    text-align:center;
    color:#fff;
}

#scrollInfo {
    background:black;
    -webkit-border-radius:10px;
    position:absolute;
    bottom:0;
    left:50%;
    width:50%;
    z-index:1000;
    margin-left:-25%;
    color:#fff;
    text-align:center; 
  -webkit-animation-name: info;
  -webkit-animation-property: bottom;
  -webkit-animation-duration: 500ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;
}

#main {
    padding:10px;
    background:lightblue;
}

#information{
    background:darkblue;
    color:#fff;
    padding:10px;
}

@-webkit-keyframes "info" {
  0% {
    bottom:-50px;
  }
  
  100%{
   bottom:0;
  }
}

JavaScript

//アドレスバー消す
window.scrollTo(0,1);

$(function(){
    //スクロールさせない
   $(document.lastChild).attr('style', 'height:' + window.innerHeight + 'px;overflow:hidden');
    $(document.body).attr('style', 'height:100%;overflow:hidden');
    
    var $info = $('<div>', {'id':'scrollInfo', 'text':'↓スクロールしてみて！'});
    
    $info.on('click', function(){
        var position = $('#information').position();
        console.log(position);
        $($.browser.safari ? 'body' : 'html').animate({scrollTop:position.top}, 400, 'swing');
    });
    
    setTimeout(function(){
        $(document.lastChild).attr('style', null);
        $(document.body).attr('style', null);
        $('#loading').hide();
    
        $(document.body).append($info);
        
    }, 3000);
       
});

$(window).on('scroll', function(){
   $('#scrollInfo').remove();
});