JSFiddle - React, Tailwind, and code Playground

by libinvbabu

HTML

<div id="wrapper">
http://jsfiddle.net/Drakinfly/DhBSZ/
    <div id="mask">

        <div id="item1" class="item">
            <div class="content">item1 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
        </div>
        
        <div id="item2" class="item">
            <a name="item2"></a>
            <div class="content">item2 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
        </div>
        
        <div id="item3" class="item">
            <a name="item3"></a>
            <div class="content">item3 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
        </div>
        
        <div id="item4" class="item">
            <a name="item4"></a>
            <div class="content">item4 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
        </div>
        
        <div id="item5" class="item">
            <a name="item5"></a>
            <div class="content">item5 <a href="#item1" class="panel">1</a> | <a href="#item2" class="panel">2</a> | <a href="#item3" class="panel">3</a> | <a href="#item4" class="panel">4</a> | <a href="#item5" class="panel">5</a> | <a href="#item6" class="panel">6</a></div>
        </div>
        
        <div id="item6" class="item">
            <a name="item6"></a>
            <div...

CSS

body {
    height:100%;
    width:100%;
    margin:0;padding:0;
    overflow:hidden;
}

#wrapper {
    width:100%;
    height:100%;
    position:absolute;
    top:0;left:0;
    background-color:#ccc;
    overflow:hidden;
}


    #mask {
        width:100%;
        height:500%;
        background-color:#eee;
    }

    .item {
        width:100%;
        height:20%;
        display:block;
        background-color:#ddd;
    }    
    
    
    .content {
        width:400px;
        height:300px;
        top:20%;
        margin:0 auto;
        background-color:#aaa;
        position:relative;
    }
    
    .selected {
        background:#fff;
        font-weight:700;
    }

JavaScript

/**
 * jQuery.ScrollTo
 * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
 * Dual licensed under MIT and GPL.
 * Date: 5/25/2009
 *
 * @projectDescription Easy element scrolling using jQuery.
 * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
 * Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
 *
 * @author Ariel Flesler
 * @version 1.4.2
 *
 * @id jQuery.scrollTo
 * @id jQuery.fn.scrollTo
 * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
 *      The different options for target are:
 *        - A number position (will be applied to all axes).
 *        - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
 *        - A jQuery/DOM element ( logically, child of the element to scroll )
 *        - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
 *        - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
*        - A percentage of the container's dimension/s, for example: 50% to go to the middle.
 *        - The string 'max' for go-to-end. 
 * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
 * @param {Object,Function} settings Optional set of settings or the onAfter callback.
 *     @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
 *     @option {Number} duration The OVERALL length of the animation.
 *     @option {String} easing The easing method for the animation.
 *     @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
 *     @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
 *     @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
 * ...