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

EN

<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>