JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">Fixed Header</div>
<div id="dl-menu" class="dl-menuwrapper">
    <ul class="dl-menu">
        <li><a href="#top">BACK TO TOP</a></li>
        <li><a href="#services">OUR SERVICES</a></li>
        <li><a href="#portfolio">OUR PORTFOLIO</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#quote">GET YOUR QUOTE</a></li>
    </ul>
</div>
<div class="main-content" data-spy="scroll" data-target="#dl-menu">
    <section id="top" class="top">
        <h1>Top</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis ante ut orci consequat, non facilisis felis fermentum. Etiam nisl velit, ullamcorper non est vitae, aliquam molestie risus. Donec faucibus malesuada massa at convallis. Aenean enim risus, imperdiet in aliquam in, dictum non orci. Aliquam vel elit eget dolor facilisis maximus commodo quis neque. Aliquam eu congue justo, tempus finibus nulla. Morbi ac nisl at sapien pharetra condimentum. Pellentesque porttitor ipsum sit amet urna convallis pharetra. Aliquam erat volutpat. Vestibulum pellentesque est sed felis aliquam, non posuere erat lobortis. Ut quis ligula quis diam mollis feugiat.

Cras congue metus sed tellus pretium vehicula. Cras id purus malesuada, porta quam id, tempus dolor. Aliquam id suscipit augue. Nullam nec venenatis felis. Morbi nisl mi, lobortis eu ligula quis, eleifend consequat risus. Sed vel leo pretium, fermentum diam quis, luctus ante. Aenean tempor nisi sed lobortis ultricies. Sed a metus id erat dictum ornare id sed ligula. Vivamus et lectus dignissim purus dapibus ultricies eget non arcu. Aenean posuere interdum diam, ut bibendum lacus ullamcorper eget. Nullam a semper ante.

Aliquam in lorem eros. Suspendisse mollis, nisi vitae tristique vestibulum, risus turpis laoreet eros, ac lobortis elit sem in neque. Phasellus id rutrum dui. Donec cursus est quis euismod elementum. Donec elit tortor, faucibus vel molestie non, cursus sit amet nulla. Ut laoreet lacus vitae felis...

CSS

body {width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; font-family: 'Open Sans Condensed', sans-serif; color: #252525; font-size: 1.6rem;}
.main-content {position: realtive; width: 100%; height: 100%; margin: 60px 0 60px 0;}
#header, #footer { position: fixed; width: 100%; background: transparent; z-index: 9; color: #f2f2f2; }
#header { top: 0; height: 60px; background: linear-gradient(#252525, #353535, #454545); box-shadow: 3px 0 15px #000; }
#footer { bottom: 0; height: 60px; background: linear-gradient(#454545, #353535, #252525); box-shadow: -3px 0 15px #000; }
#dl-menu {position: fixed; top: 0; right: 0; z-index: 100000; background: #ccc;}

JavaScript

$(".dl-menu li a[href^='#']").on('click', function(e) {

        // This sets the hash
        var target;
        target = this.hash;

        // Prevent default anchor click behavior
        e.preventDefault();

        // The grabs the height of my header
        var navOffset;
        navOffset = $('#header').height();

        // Animate The Scroll
        $('html, body').animate({
            scrollTop: $(this.hash).offset().top - navOffset
        }, 600, function(){

        // Adds hash to end of URL
        return window.history.pushState(null, null, target);

        });

});