ページには、ホーム、テンプレート、および 3D の 3 つの 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>