JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
<script src="https://cdn.rawgit.com/flesler/jquery.localScroll/master/jquery.localScroll.min.js"></script>
<div id="nav">
    <a href="one">One</a>
    <a href="two">Two</a>
    <a href="three">Three</a>
    <a href="four">Four</a>
    <a href="five">five</a>
    <a href="six">Six</a>
    <a href="seven">Seven</a>
    <a href="eight">Eight</a>
    <a href="nine">Nine</a>
</div>
<div id="window">
     <div id="section-wrapper">
         <div id="one" class="section"><p>One</p>
         </div>
         <div id="two" class="section"><p>Two</p>
         </div>
         <div id="three" class="section"><p>Three</p>
         </div>
         <div id="four" class="section"><p>Four</p>
         </div>
         <div id="five" class="section"><p>Five</p>
         </div>
         <div id="six" class="section"><p>Six</p>
         </div>
         <div id="seven" class="section"><p>Seven</p>
         </div>
         <div id="eight" class="section"><p>Eight</p>
         </div>
         <div id="nine" class="section"><p>Nine</p>
         </div>
    </div>
</div>

CSS

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #666;
    height: 30px;
    line-height: 30px;
    z-index: 100;
}

#window {
    width: 500px;
    height: 300px;
    margin: 60px auto 0 auto;
    position: relative;
    overflow: hidden;
    border: 1px solid #666;
}

#section-wrapper {
    width: 300%;
    height: 300%;
    position: relative;
    background-repeat: repeat;
}

.section {
    width: 33%;
    height: 33%;
    float: left;
    position: relative;
}

p {
    color: #f0f;
    font-size: 45px;
    line-height: 120px;
    text-align: center;
}

JavaScript

/*!
 * jQuery.localScroll
 * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
 * Licensed under MIT
 * http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
 * @author Ariel Flesler
 * @version 1.4.0
 */
 ;(function(plugin) {
    // AMD Support
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], plugin);
    } else {
        plugin(jQuery);
    }
}(function($) {
	var URI = location.href.replace(/#.*/, ''); // local url without hash, like http://www.vinniesitalian.com/"

	var $localScroll = $.localScroll = function(settings) {
		$('body').localScroll(settings);
	};

	// Many of these defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
	// @see http://demos.flesler.com/jquery/scrollTo/
	// The defaults are public and can be overriden.
	$localScroll.defaults = {
		duration: 1000, // How long to animate.
		axis: 'y', // Which of top and left should be modified.
		event: 'click', // On which event to react.
		stop: true, // Avoid queuing animations 
		target: window // What to scroll (selector or element). The whole window by default.
		/*
		lock: false, // ignore events if already animating
		lazy: false, // if true, links can be added later, and will still work.
		filter: null, // filter some anchors out of the matched elements.
		hash: false, // if true, the hash of the selected link, will appear on the address bar.
		onBefore: null // called before scrolling, "this" contains the settings and gets 3 arguments
		*/
	};

	$.fn.localScroll = function(settings) {
		settings = $.extend({}, $localScroll.defaults, settings);

		if (settings.hash && location.hash) {
			if (settings.target) window.scrollTo(0, 0);
			scroll(0, location, settings);
		}

		return settings.lazy ?
			// use event delegation, more links can be added later.		
			this.on(settings.event, 'a,area', function(e) {
				if (filter.call(this)) {
					scroll(e, this, settings); 
				}
			})...