JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page1" style="background: yellow">
    <button id="exploreBtn">Explore</button>
</div>
<div id="content" style="background: green">fsdfsdfsd</div>

CSS

body {height: 100%; width: 100%; margin: 0; padding: 0;}

#page1, #content {height: 100%; width: 100%; position: absolute;}
 
#content {top: 100%; display:none;}

JavaScript

$(document).ready(function() {
    $('#exploreBtn').on('click', function() {
        $('#content').fadeIn(500);
        console.log($("#content").offset().top)
        $('html, body').animate({
            scrollTop: $("#content").offset().top
        }, 1000, function(){
            $("#page1").css('display','none');
            $('#content').css('top',0);
            $(document).scrollTop(0);
        });
    });
});