JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search" />
</form>
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span9">
<div class="well links">
<div class="span3">
<ul>
<li><a href="#scroll1" rel="" id="scroll2" class="scroll">scroll to 1</a>
</li>
<li><a href="#scroll2" rel="" id="scroll2" class="scroll">scroll to 2</a>
</li>
<li><a href="#scroll3" rel="" id="scroll3" class="scroll">scroll to 3</a>
</li>
<li><a href="#scroll4" rel="" id="scroll4" class="scroll">scroll to 4</a>
</li>
</ul>
</div>
<div class="span3">
<ul>
<li><a href="#scroll5" rel="" id="scroll5" class="scroll">scroll to 5</a>
</li>
<li><a href="#scroll6" rel="" id="scroll6" class="scroll">scroll to 6</a>
</li>
...
CSS
.navbar-fixed-top {
position: fixed;
top: 0;
}
.span3 {
float: left;
display: inline-block;
width: 33%;
white-space: nowrap;
}
.links {
width:70%;
position: fixed;
top: 60px;
left: 15%;
}
.scrollable {
margin-top:200px;
z-index:5;
overflow:auto;
}
.footer {
height:40px;
}
ul {
list-style: none
}
li {
display: block
}
JavaScript
$('a').click(function () {
$('html, body').animate({
scrollTop: $($(this).attr('href') + 'to').offset().top - 200
}, 500);
return false;
});