Question

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>

Answer 1

Your #page div has left: -500px.

<div id="page" class="clearfix" style="width: 1800px; left: -500px;">

Remove that

<div id="page" class="clearfix" style="width: 1800px;">

and it works fine.

---

If you want the “home” panel to be visible on page load, then you’ll need to keep the offset, and then use a little javascript, on page load, to “un-do” the offset, and adjust the scrollLeft at the same time.

http://jsfiddle.net/CEC3L/20/