更新

Question

看来，我想要实现的目标几乎是不可能的。

我正在尝试创建一个依赖于jQuery的水平布局，但即使关闭了Javascript也可以使用。我还希望保留最清晰的代码并保持其语义值。所以我想我正在寻找终极解决方案。：）

网络上最常见的水平布局是：http://www.queness.com/resources/html/scroll/horizontal.html - 这将是完美的（即使关闭JS也能正常工作）。我的问题是我需要让它“双向”工作（左右两侧带“开始”项目。）

效果应该与此类似：http://steveandjacqs.com/网站（和编码后端）很棒，但没有JS就无法使用，而且代码中充满了黑客。

我的CSS：

html,body { overflow: hidden; }
.wrapper { position: relative; width: 100%; height: 100%; } 
.wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; }
#item-left { position: absolute: top: 0px; left: 0%; }
#item-home { position: absolute; top: 0px; left: 200%; }
#item-right{ position: absolute; top: 0px; left: 400%; }
#item-down { position: absolute; top: 200%; left: 0%; }

我的HTML：

<body>
<nav><ul>
     <li><a href="#item-left">Left</a></li>
     <li><a href="#item-home">Home</a></li>
     <li><a href="#item-right">Right</a></li>
     <li><a href="#item-down">Down</a></li>
</ul></nav>
<div class="wrapper">
     <div class="wrapper-cont">
           <div id="item-left">Element outside viewport on the left side</div>
           <div id="item-home">Element on the center of viewport</div>
           <div id="item-right">Element outside viewport on the right side</div>
           <div id="item-down">Element on the center of viewport but down</div>
     </div>
</div>
</body>

我的JAVASCRIPT会在各部分之间使用某种流畅的动画插件（可能会滚动？）。应该禁用浏览器滚动（至少是垂直），DIV本身应该是可滚动的。

///

我应该发布我的网站的屏幕截图还是这种方式不可思议？

提前谢谢！

PS：我或多或少是jQuery copypasta，所以请放轻松。：）

更新

如何修改.htaccess以在进入主页时添加内部链接：将“http://example.com”重写为“http：//example.com#home”？我可以将布局编码为“常用方式”（例如在前面的Queness示例中）。

Answer 1

您需要遵循示例网站使用的方式。

您当前设置中的问题是

菜单不在home元素内，因此不会随之滚动..
每个“页面”

要在开始时自动滚动到#item-home，您可以使用

<meta http-equiv="refresh" content="0;URL='#item-home'">

在您网页的<head>部分

演示，包括http://jsfiddle.net/gaby/QsQDK/1/

处的这些更正/补充

水平滚动布局左/右：jQuery / CSS测验

更新

1 个答案: