JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<nav>
    <ul>
        <li><a href="#foo" class="active">Foo</a></li>
        <li><a href="#bar">Bar</a></li>
        <li><a href="#baz">Baz</a></li>
    </ul>
</nav>
<div id="viewport">
    <section id="foo">Foo</section>
    <section id="bar">Bar</section>
    <section id="baz">Baz</section>
</div>

CSS

#viewport {
    height:200px;
    width:200px;
    overflow:hidden;
    background:#484848;
}
section {
    height:200px;
    width:200px;
}
#bar {
    height:400px;
    background:#FF0000;
}
.active {
    background:#00FF00;
}

JavaScript

$('a').click(function () {
    var aHref = $(this).attr('href');
    var sectionSelect = $('section'+aHref+'');
    var sectionHeight = sectionSelect.height();
    //alert(sectionHeight);
    $('#viewport').height(sectionHeight);
    $('.active').removeClass('active');
    $(this).addClass('active');
    
     var aTarget = $(this).attr("href");
      $('html, #viewport').animate({scrollTop: $(aTarget).offset().top}, 800);

});