How to load a page in the middle of the page

Question

I am creating a web page where the developer wants all navigation to be done by scrolling horizontally (from left to right). I encoded the horizontal layout. However, he would like to be able to run a horizontal layout to load one of the middle divs on my list, which allows the user to scroll in any direction. For example, if I had a list of 5 sections horizontally (1,2,3,4,5), and I wanted the page to start with div 3, which allowed the user to scroll left and right to go to div 2 or vice versa, to switch to div 4. Currently, by default it starts with div 1 (left), which means that the user can scroll only in one direction.

Here is the layout: Click here to enlarge it.

I also searched the site, but the answer used the anchor / tag name method, but I want to load the page directly on the middle page.

Here are similar questions:

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

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

On the side of the note, I'm currently learning jQuery and Javascript, but I'm in the very early stages - still spending through the code academy, but haven't hit any real world code yet. So at the moment I'm playing with plugins as a way to learn, but I hope in a few months I can create my own material!

I just want to know how to do this.

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

Answer 1

Well, after searching for two days, I found the answer in "yahoo Answers." I forgot to tag the link, but here is the code I received.

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

Answer 2

No javascript

Just create an identifier for each of the sections in the layout and set the default layout identifier as the default anchor so that when you load the page, it immediately falls into this section.

Set the link of the previous page to the anchor of the previous layout identifier and is similar to the next layout identifier. Thus, at any time when these links are clicked, their bindings will allow them to be displayed, and the rest are hidden.

The disadvantage of this method is that you will not see the scroll effect, as this requires JavaScript; however, it must work as intended.

With javascript

Just create an identifier for each of the sections in the layout, as described earlier. Create 3 JavaScript variables, one for the current, previous, and next layout identifiers. and set the default cell id for this variable. Or you can create a JavaScript object that will contain 3 properties: the current layout identifier, the previous layout identifier, and the next layout identifier.

Attach a JavaScript function to the page loading process using window.onload or the jquery $ (document) .ready () function. Use the animate function in jQuery, passing it the current layout id. This will simply scroll to the id passed along with the scroll effect.

You must achieve your goal as soon as possible.