我在主页、模板和 3d 的页面中有三个 div。模板和 3d div 将驻留在屏幕外。
当我单击导航锚时，页面滚动到目标 div。
我需要使用 jQuery 的滚动功能，因为将来我会在平行中使用这个滚动功能。
下面是用于滚动但无法显示屏幕外的左 div 的代码。
和 js 小提琴链接 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>