JSFiddle - React, Tailwind, and code Playground
HTML
<div class="header"><a href="#">Link</a></div>
<div class="target-div"></div>
CSS
.header {
height:100px;
background:#ccc;
width:100%;
}
.target-div {
width:200px;
height:200px;
background:red;
position:absolute;
top:0;
left:200px;
}
JavaScript
var link = $(".header a");
var targetDiv = $(".target-div");
var wWidth = $(window).width();
var wHeight = $(window).height();
link.click(function(e) {
e.preventDefault();
topMargin = wHeight/2 - targetDiv.height()/2;
targetDiv.animate({
top:topMargin + $(".header").height()
})
});