JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget ultricies erat. Mauris sed dapibus metus. Vestibulum et accumsan libero, et adipiscing ligula. Cras nec nisi porta, malesuada eros vitae, cursus nunc. Suspendisse potenti. Aliquam vel felis risus. Phasellus euismod mi eget dui pretium posuere. Phasellus varius sodales quam, et faucibus justo commodo pulvinar. Vivamus vestibulum purus a tellus scelerisque, eu vulputate ante fermentum. Etiam tempor urna non tortor porta dictum. Praesent scelerisque vehicula erat, nec convallis eros interdum nec. Sed pretium feugiat mollis. Duis sit amet quam sem. Proin id scelerisque ante, id interdum dolor.
Aliquam ultrices nulla leo, in aliquet enim rhoncus nec. Vivamus sagittis sit amet enim eu volutpat. Proin molestie cursus orci, eget tempor dui pellentesque quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut egestas ligula eu risus malesuada volutpat sed id leo. Nulla pharetra turpis erat, id porttitor sem eleifend ut. Duis vel mi sed lorem porta volutpat. Vivamus vitae est sed neque semper imperdiet eu nec erat. Nulla id risus tristique, eleifend nibh ac, aliquet est. Aenean eu eros libero. Aenean interdum interdum felis, non sagittis justo vulputate vitae. Vivamus vehicula nisl diam. Maecenas dapibus ligula in nunc pellentesque, ut condimentum sem elementum. Aliquam porttitor pulvinar enim, id pretium felis consectetur rhoncus.
Fusce erat nisi, viverra rhoncus elit non, dictum mollis sem. In urna ante, consequat vitae felis sit amet, placerat elementum nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae consectetur ligula, sed lacinia nisi. Morbi venenatis neque commodo augue congue vehicula. Duis purus odio, scelerisque rhoncus justo quis, suscipit ullamcorper justo. In elit nulla, malesuada sit amet augue id, consectetur malesuada tortor. Mauris luctus vel quam eu tincidunt.
Ut at eleifend...
CSS
html, body { margin: 0; }
.top {
background: purple;
height: 200px;
margin-top: -200px;
overflow: hidden;
}
.container {
background: fuchsia;
height: 1000px;
}
JavaScript
$('html, body').animate({
scrollTop: $("#topedge").offset().top + 200
}, 0, function() {
$(".top").css("margin-top","0px");
});