JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div class="wrap1" id="one">
    <a href="#two">two</a>
</div>
<div class="wrap1" id="two">
    <a href="#three">three</a>
</div>
<div class="wrap1" id="three">
    <a href="#four">four</a>
</div>
<div class="wrap1" id="four">
    <a href="#one">first</a>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}
* {
    margin:0;
    padding:0;
}
#one {
    background-color:#F60;
}
#two {
    background-color:#CCC;
}
#three {
    background-color:#666;
}
.wrap1 {
    height:70%;
    margin-bottom:20px;
}

JavaScript

$('a[href*=#]').bind('click', function (e) {
    e.preventDefault();

    var target = $(this).attr("href");
    var parentDiv = $(this).parent(".wrap1");
    var offset = Math.round(parseInt($(target).offset().top) - (0.15 * parentDiv.height()));

    $('html, body').stop().animate({ scrollTop: offset }, 800, function () {
        //location.hash = target; 
    });

    return false;
});