alternative of scrollLeft()

Question

G'day!

I have a page which has Horizontally Scroll feature going on there.
I have a side bar and a content box

In side bar I have 5 links, say LINK1 - LINK5

In the content box, I have 3500px of width which contains 5 sections of divs of 700px each.
So the page initially loads in the first 700px div. So if I click on Link 3, it will smoothly scrolling to 3rd div section.

However, I would like to load the page in the 2nd div.
I was able to do this using scrollLeft()

<script>$("div.content1").scrollLeft(700);</script>

But the horizontal scrolling will be messed up. The second div will act as first div, which means when I click LINK1, it won't be scrolled back.

Help?

*I think this code is needed

<script>
    function goto(id, t){   
        //animate to the div id
        $(".contentbox-wrapper").stop().animate({"left": -($(id).position().left)}, 1200);  
    }
</script>

This is sample of HTML code

<div id="sidebar1">
<span class="upper">Foods</span><br />
<a href="#" onClick="goto('#rice', this); return false"><span class="lower">Rice, Noodles & Pasta</span></a><br />
<a href="#" onClick="goto('#snacks', this); return false"><span class="lower">Snacks & Tidbits</span></a><br />
<a href="#" onClick="goto('#canned', this); return false"><span class="lower">Canned & Ready to Eat</span></a><br />
<a href="#" onClick="goto('#breakfast', this); return false"><span class="lower">Breakfast Cereal</span></a><br />
<br />

This is sample of my content box

<div class="content1">

<div class="contentbox-wrapper">
    <div id="rice" class="contentbox" align="center">
        <h2>
            Rice, Noodles & Pasta
        </h2>

        <section id="product">
                <ul class="clear">
                    <li data-id="1">
                        <div href="#">
                            <a href="images/products/f1/_DSC4640.jpg" class="zoom"><img src="images/products/f1/_DSC4640.jpg" width="200" height="200" /></a>
                            <h3>Maggi Curry Flavour</h3>
                            <p>(5 + 1) x 79 G</p>
                            <h2>Price:$2.40</h2>
                        </div>
                    </li>

Answer 1

I've created an example based a little on your markup. I hope, that it is, what you're looking for. I also made some minor changes on your JavaScript. See the explanation below.

HTML

<nav>
    <a>Item 1</a>
    <a>Item 2</a>
</nav>

<div class="contentbox-wrapper">
    <div>
        <h2>Item 1</h2>
    </div>
    <div>
        <h2>Item 2</h2>
    </div>
</div>

If you can apply a markup like this, where the index of each link corresponds with the index of each content container, then you can get rid of all the ids that you need in the JavaScript part.

CSS

div.contentbox-wrapper {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;
    overflow-x: scroll;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

div.contentbox-wrapper > div {
    display: inline-block;
    width: 400px;
    height: 200px;
    text-align: center;
}

div.contentbox-wrapper > div:last-child {
    margin-right: 0;
}

JavaScript

var container = $('div.contentbox-wrapper');
var boxes = container.children();

$('nav > a').click(function() {
    container.stop().animate({
        scrollLeft: boxes.eq($(this).index()).get(0).offsetLeft
    }, 350);
});

Try to store selectors that you use multiple times in variables. The advantage is, that you don't need to re-query them again. This JavaScript does nothing else, then getting the offset of the box that corresponds with the clicked link, using .index() and .eq(). This value is then used in the .animate()-function to scroll to this position.

Demo

Try before buy

A few notes

• If you have an ampersand within normal content like "Rice, Noodles & Pasta" you must escape it like: &.
• Don't use align="center". It is deprecated since HTML4. Use CSS for this purpose.