JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page1" style="background: yellow">
    <div id="exploreBtn">Explore</div>
</div>
<div id="content" style="background: green">
    <div id="goBack">Go back</div>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
</div>

CSS

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#page1 {
    height: 100%;
    width: 100%;
    position: absolute;
}
#content {
    height: auto;
    width: 100%;
    position: absolute;
    top: 100%;
    display:none;
}
#exploreBtn {
    height: 50px;
    width: 50px;
    background-color: red;
}

#goBack {
    position: fixed;
    bottom: 5%;
    right: 5%;
    height: 50px;
    width: 50px;
    background-color: purple;
}

JavaScript

$(document).ready(function () {
    $('#exploreBtn').on('click', function () {
        showScrollHide('#content', '#page1', function () {
            $('#content').css('top', 0);
            $(window).scrollTop(0);
        });
    });

    $('#goBack').on('click', function () {
        showScrollHide('#page1', '#content', function () {
            $('#content').css('top', '100%');
            $(window).scrollTop(0);
        });
    });
});

function showScrollHide(element, hide, func) {
    $(element).fadeIn(500, function () {
        $('html, body').animate({
            scrollTop: $(element).offset().top
        }, 1000, function () {
            $(hide).fadeOut(100, func);
        });
    });
}