Question

I am creating a web page whereby the designer wants all the navigation to be done by scrolling horizontally (left to right). I have coded the horizontal layout. However, he would like to be able to start the horizontal layout to load one of the middle divs in my list thus enabling the user to scroll in either direction. An example is if I had a list of 5 divs horizontally (1,2,3,4,5) and I wanted the page to start at div 3 thus allowing user to scroll left to right to get to div 2 or the other way to get to div 4. Currently the default starts at div 1 (left) meaning that the user can only scroll one way initially.

Here is the layout:

Click here for larger view

I also searched the site but the answer were using the anchor/name tag technique, but I want to load the page directly on the middle part page.

Here are the similar questions:

• How to have a web page load at the bottom of the site.

• How to have a page load to the middle of the page (instead of top)?

On a side note, I am currently learning jQuery and Javascript but am in the very early stages – still trawling through codeacademy and not made it onto any real world code yet. So at the moment I am playing with plugins as a way of learning but hopefully in a few months I can build my own stuff!

I just want to know how can this be accomplished.

If you can have some simple javascript/jQuery code (jsfiddle), it will be highly appreciated.

Answer 1

Ok after searching for 2 days I found the answer in “yahoo answers” I forgot to bookmark the link, But here’s the code that I got.

    $(window).load(function(){

        $(document).ready(function(){
         scrollTo(($(document).width() - $(window).width()) / 2, 0);
    });
});