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.
我正在创建一个web页面，设计人员希望通过水平滚动(从左到右)来完成所有导航。我把水平布局编码了。但是，他希望能够启动水平布局来加载我列表中的一个中间div，从而使用户可以向任意方向滚动。例如，如果我有一个5 div的列表(1、2、3、4、5)，并且我希望页面从div 3开始，因此允许用户从左向右滚动到div 2，或者从另一个方向滚动到div 4。目前，默认从div 1(左)开始，这意味着用户最初只能以一种方式滚动。
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!
另一方面，我目前正在学习jQuery和Javascript，但还处于非常早期的阶段——仍然在codeacademy上搜索，还没有将其应用到任何实际的代码中。因此，目前我正在使用插件作为一种学习方式，但希望在几个月后我可以构建我自己的东西!
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.
如果您可以有一些简单的javascript/jQuery代码(jsfiddle)，那么将非常感激它。
2 个解决方案
#1
3
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.
在搜索了两天之后，我在“yahoo answers”中找到了答案，我忘记加书签了，但是这里是我得到的代码。
$(window).load(function(){
$(document).ready(function(){
scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
});
#2
2
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.
只需为布局中的每个div创建一个id，并将默认布局的id设置为默认锚点，以便当页面加载时，它会立即转到这个部分。将前一页的链接设置为前一页布局id的锚点，类似于下一页布局id，因此每当点击这些链接时，锚点就会显示它们，而其他链接则被隐藏。这种方法的缺点是您看不到滚动效果，因为这需要JavaScript;然而，它应该像预期的那样工作。
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.
如前所述，只需为布局中的每个div创建一个id。创建3个JavaScript变量，一个用于当前、上一个和下一个布局id。并将默认单元格id设置为该变量。或者您可以创建一个JavaScript对象，它将包含3个属性:当前布局id、以前的布局id和下一个布局id。onload和jquery的$(文档)时()函数。使用jQuery中的animate函数，将当前布局id传递给它，这只需将页面滚动到传递的id以及滚动效果。你应该马上实现你的目标。
#1
3
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.
在搜索了两天之后，我在“yahoo answers”中找到了答案，我忘记加书签了，但是这里是我得到的代码。
$(window).load(function(){
$(document).ready(function(){
scrollTo(($(document).width() - $(window).width()) / 2, 0);
});
});
#2
2
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.
只需为布局中的每个div创建一个id，并将默认布局的id设置为默认锚点，以便当页面加载时，它会立即转到这个部分。将前一页的链接设置为前一页布局id的锚点，类似于下一页布局id，因此每当点击这些链接时，锚点就会显示它们，而其他链接则被隐藏。这种方法的缺点是您看不到滚动效果，因为这需要JavaScript;然而，它应该像预期的那样工作。
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.
如前所述，只需为布局中的每个div创建一个id。创建3个JavaScript变量，一个用于当前、上一个和下一个布局id。并将默认单元格id设置为该变量。或者您可以创建一个JavaScript对象，它将包含3个属性:当前布局id、以前的布局id和下一个布局id。onload和jquery的$(文档)时()函数。使用jQuery中的animate函数，将当前布局id传递给它，这只需将页面滚动到传递的id以及滚动效果。你应该马上实现你的目标。