JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top"></div>
<div class="container" id="topedge">Whoaa</div>

CSS

html, body { margin: 0; }

.top {
    background: purple;
    height: 200px;
    margin-top: -200px;
}

.container { 
    background: fuchsia; 
    height: 1000px; 
}

JavaScript

$('html, body').animate({
    scrollTop: $("#topedge").offset().top + 200
}, 0, function() {
    
    $(".top").css("margin-top","0px");
    
});