jquery - 如何在左侧 div 超出屏幕的情况下左右滚动页面

Question

我在一个页面中有三个 div，分别是主页、模板和 3d。模板和 3d div 将位于屏幕之外。

当我点击导航 anchor 时，页面会滚动到目标 div。

我需要使用 jQuery 的滚动功能，因为将来我会在平行中使用这个滚动功能。

下面是用于滚动但无法显示超出屏幕的左侧 div 的代码。

和 js fiddle 链接 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>

Answer 1

解决了。你可以查看链接

请参阅下面的示例..
只需重新排列 div 位置即可。

<div id="home" class="content" style="height: 378px;  width: 516px;">
    Home
</div>
     <div id="templates" class="content" style="height: 378px; width: 516px;">
   Template
</div>
<div id="3d" class="content" style="height: 378px; width: 516px;">
    3D
    </div>
</div>   ​

http://jsfiddle.net/CEC3L/8/

http://jsfiddle.net/CEC3L/26/