I have three divs in a page which Home, template and 3d. template and 3d div will reside out of screen.
When I click on navigation anchor, then the page scroll to the target div.
I need to use scroll function of jQuery because in future I will use this scroll function in parallex.
Below is the code which is used to scroll but getting fail to show left div which is out of screen.
and js fiddle link http://jsfiddle.net/naresh_kumar/CEC3L/4/
<div id="page" class="clearfix" style="width: 1800px; left: -500px;">
<div id="header">
<div class="nav-enabled">
<ul id='navigation'>
<li><a href="#home">Home</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#3d">3D</a></li>
</ul>
</div>
</div>
<div id="templates" class="content" style="height: 378px; width: 516px;">
Template
</div>
<div id="home" class="content" style="height: 378px; width: 516px;">
Home
</div>
<div id="3d" class="content" style="height: 378px; width: 516px;">
3D
</div>
</div>
<script>
$(function() {
$('ul#navigation a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
<style>
#page
{
background: none repeat scroll 0 0 #E6E6E8;
height: auto;
min-height: 100%;
position: relative;
top: 0;
}
.content
{
background: none repeat scroll 0 0 #E6E6E8;
color: #000000;
float: left;
}
#header
{
clear: both;
color: #FFFFFF;
display: block;
}
#header .nav-enabled
{
display: block;
float: left;
height: auto;
left: 0;
opacity: 0.72;
padding: 20px;
position: fixed;
top: 0;
width: auto;
z-index: 5;
}
</style>
