JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div class="container"  id="nav">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <div class="span12">
                    <a class="brand" href="#">Home</a>
                     <ul class="nav" id="my-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#" data-target="one">1</a></li>
                        <li><a href="#" data-target="two">2</a></li>
                         <li><a href="#" data-target="three">3</a></li>
                         <li><a href="#" data-target="four">4</a></li>
                         <li><a href="#" data-target="five">5</a></li>
                     </ul>
                </div>
            </div> 
        </div> 
    </div> 
</div>
<div class="container">
    <div class="span3">
        <p style="height:1000px;padding:10px;" id="one">
          
            Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo.  Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.
            
        </p>
         <p style="height:1000px;padding:10px;" id="two">
          
            Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo.  Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr....

CSS

#con .well {
    height:400px;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

JavaScript

$('#nav').affix({
});

$( '#my-nav > li > a' ).on('click', function(event) {
                event.preventDefault();
                var target = "#" + $(this).data('target');
               
                $('html, body').animate({
                    scrollTop: $(target).offset().top
                }, 1000);
            });