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

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

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

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

• javascript
• jquery
• html
• css

• Can you describe exactly what 'middle of the page' is? I'm having difficulties wrapping my head around this. Is it that you want the page to be centered, where the margins on left and right are the same? – Ohgodwhy Commented Sep 22, 2012 at 7:26
• Please see the image attached. It is a horizontal layout that can be scrolled from left or right. I want to start it in the middle of the page/document. – IAMTHESTIG Commented Sep 22, 2012 at 7:33
• 1 The way I understand this is that you want a carroussel and that start in middle. I am correct? – Manuel Choucino Commented Sep 22, 2012 at 13:03
• Yes. But it wont be like an image gallery. It's something like this: nintendo..au/gamesites/mariokartwii/#n64 – IAMTHESTIG Commented Sep 22, 2012 at 14:46

2 Answers 2

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);
    });
});

Without JavaScript

Simply create an id for each of the divs in the layout, and set the default layout's id as the default anchor, so that when the page loads, it immediately goes to this section.
Set the link of the previous page to the anchor of the previous layout id, and similar to the next layout id. So, anytime those links are clicked, their anchors will enable them to be displayed, while the others are hidden.
The disadvantage of this method is that you won't see the scrolling effect, as that requires JavaScript; however, it should work as intended.

With JavaScript

Simply create an id for each of the divs in the layout as explained earlier. Create 3 JavaScript variables, one for the current, the previous and the next layout ids. and set the default cell's id to that variable. Or You can create a JavaScript object, which will hold 3 properties: current layout id, previous layout id, and next layout id.
Attach a JavaScript function to the page load process, using window.onload or jquery's$(document).ready() function. Use the animate function in jQuery, passing it the current layout id. That will simply scroll the page to the passed id, along with the scrolling effect.
You should achieve your goal in no time.