JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topPart">
    This we want to hide.<br>
    <a id="clicky" title="Click to Scroll Down.">Click Here</a>
</div>
<div id="header-logo">
    Logo Here.
</div>
<div id="stuffBelow">
    Stuff below.
</div>

CSS

#topPart {background-color: #0f0;
    height: 300px;
    overflow: hidden;
    transition: height .5s linear}
#topPart a {display: inline-block;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer}

#header-logo {background-color: #00f;
    height: 100px;
    width: 100px}

#stuffBelow {background-color: #f00;
    height: 500px}

JavaScript

$('#clicky').click(function(){
    $('#topPart').css('height', '0px');
    setTimeout(function(){
        $('html,body').animate({scrollTop: $('#stuffBelow').offset().top}, '1500' );
    }, 515);
});