JSFiddle - React, Tailwind, and code Playground

HTML

<header>
</header>
<div id="show"></div>
<div id="content">
    <div id="broca">
    </div>
</div>
<footer>    
</footer>

CSS

header, footer{
    display:block;
    height:200px;
    background:red;
    width:100%;
}
#content{
    display:block;
    width:100%;
    height:1500px;
    background:blue;
}
#broca{
    width:50px;
    height:0;
    background:#000;
}
#show{
    position: fixed;
    color: white;
}
}

JavaScript

$(document).ready(function(){
    var $documentHeight = $(document).height();
    var $windowHeight = $(window).height();
    var $scrollHeight = $documentHeight - $windowHeight;
    var $toBottom = false;

    $(window).scroll(function(){
        var $broca = $('#broca');

        var st = $(this).scrollTop();

        if(st > $broca.height()){
            $broca.clearQueue().animate({height: st}, 1000);
        }

        if(st == $scrollHeight && $toBottom == false){
            $(this).scrollTop(0);
            $toBottom = true;
        }

        if(st != 0){
            $broca.show();
        }
        else{
            $broca.hide();
        }
    });
});