JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#cont_home" id="nav1">home</a></li>
    <li><a href="#cont_biografie" id="nav2">biografie</a></li>
    <li><a href="#cont_portfolio" id="nav3">portfolio</a></li>
    <li><a href="#cont_contact" id="nav4">contact</a></li>
</ul>
<div id="cont_home">cont_home</div>
<div id="cont_biografie">cont_biografie</div>
<div id="cont_portfolio">cont_portfolio</div>
<div id="cont_contact">cont_contact</div>

CSS

ul { position: fixed; right: 0; }
li { float: left; margin-right: 10px; }
div { height: 500px; }

JavaScript

$("#nav1").click(function(){
 $('html, body').animate({
     scrollTop: $("#cont_home").offset().top}, 1500,"fast","swing"
    );
}); 
$("#nav2").click(function(){
 $('html, body').animate({
     scrollTop: $("#cont_biografie").offset().top}, "fast","swing"
    );
}); 
$("#nav3").click(function(){
 $('html, body').animate({
     scrollTop: $("#cont_portfolio").offset().top}, 1500,"linear"
    );
}); 
$("#nav4").click(function(){
 $('html, body').animate({
     scrollTop: $("#cont_contact").offset().top}, 1500,"linear"
    );
});