.js Scroll left and right of page

I have the following script and page layout - http://jsfiddle.net/wLkYg/ that allows the user to scroll up and down on my website, with a neat little javaScript swing effect.

However, as I would like to now arrange the content (colored #div boxes from the jsfiddle example above) to be next to each other/side to side, it loses the scrolling effect - http://jsfiddle.net/UjeZH/.

How would I be able to achieve the same transitions in second example, as it is in the first?

I have two versions of what you need already made up for you.

Version 1: Divs on top of each other

Version 2: Divs on top and next to each other

Check them out and tell me if they suit your need. Both versions are designed in a way so each div will have your page's height and width.

The first version doesn't have the swing effect but you can add it by:

1. Including jQuery

2. Adding the following JS ( the same as the second version )

    var $root = $('html, body');
    $('a').click(function () {
    
        $root.animate({
    
            scrollLeft: $($.attr(this, 'href')).offset().left,
            scrollTop: $($.attr(this, 'href')).offset().top
    
        }, 500);
    
        return false;
    });

Also if you use the above code, it will fix your problem, as it allows you to scroll vertically and horizontally. The code that you have allows you to scroll only vertically that's why it is not working when you align your divs horizontally.