JSFiddle - React, Tailwind, and code Playground

Single Page with Smooth Scrolling

by Jennifer Perrin

HTML

<header>
    <nav>
        <ul class="main-navigation">
            <li><a href="#section-one">Link One</a>
            </li>
            <li><a href="#section-two">Link Two</a>
            </li>
            <li><a href="#section-three">Link Three</a>
            </li>
        </ul>
    </nav>
</header>
<section class="one" id="section-one">
     <h2>Section One</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequuntur molestiae doloribus animi vel quo tenetur accusamus deserunt ipsam ab voluptates velit natus distinctio facere?</p>
</section>
<section class="two" id="section-two">
     <h2>Section Two</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequuntur molestiae doloribus animi vel quo tenetur accusamus deserunt ipsam ab voluptates velit natus distinctio facere?</p>
</section>
<section class="three" id="section-three">
     <h2>Section Three</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, consequuntur molestiae doloribus animi vel quo tenetur accusamus deserunt ipsam ab voluptates velit natus distinctio facere?</p>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family:'Merriweather Sans', sans-serif;
}
header {
    position: fixed;
    width: 100%;
    background: #424244;
    z-index: 99;
}
.main-navigation {
    list-style-type: none;
    text-align: right;
    padding: 0;
    margin: 0.8em 1em;
}
.main-navigation li {
    display: inline-block;
}
.main-navigation li a {
    padding: 0.25em 0.5em;
    background: #e16a48;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border-radius: 3px;
}
.main-navigation li a:hover {
    background: #dd5832;
}
section {
    min-height: 100%;
    position: relative;
    padding: 3em 1em 1em;
    color: #fff;
}
section.one {
    background: #5eaa94;
}
section.two {
    background: #e9c057;
}
section.three {
    background: #5a986d;
}

JavaScript

$(document).ready(function () {
    $('a[href*=#]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body')
                    .animate({
                    scrollTop: targetOffset
                }, 1000);
                return false;
            }
        }
    });
});