JSFiddle - React, Tailwind, and code Playground

by sifriday

HTML

<div id="wrapper">
    
<nav id="MainNavigation" class="pushy pushy-open">
    <ul>
        ...
        <li class="link ">
            <a href="javascript:void(0)" data-opsection="ueber-das-projekt">Über das Projekt</a>
        </li>

        <li class="link last">
            <a href="javascript:void(0)" data-opsection="kontakt">Kontakt</a>
        </li>
        ...
    </ul>
</nav>

<div id="ContentContainer">
    ...
    ...
    <section id="SID-20" data-opsection="commerce" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-22" data-opsection="workout" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-21" data-opsection="ueber-das-projekt" class="onepage-section wrapper cf">
        ...
    </section> 

    <section id="SID-23" data-opsection="kontakt" class="onepage-section cf">
        kontakt
    </section> 
    ...
    ...
</div>
    
</div>

CSS

html,
body {
   overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
    height: 100%; /* fixes focus scrolling in Safari (OS X) */
    font-family: 'Titillium Web', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: #879299; /*#465762;*/
    background: #465762;
}

#wrapper {
    overflow: scroll;
}

#ContentContainer {
    position: relative;
    background: #ffffff;
}

.onepage-section {
    height: 300px;
    background-color: silver;
    margin-bottom: 10px;
}

JavaScript

$("#wrapper").css({height: ($(window).height()-80) + "px"});

$('#MainNavigation .link a').click(function() {
    var linkClicked = $(this).attr('data-opsection');
    var destination = $('section[data-opsection="' + linkClicked +'"]').offset().top;
    console.log(destination);
    $("#wrapper").animate({scrollTop: destination}, 500 );
});