具有水平滚动但页面分开的网站答案

【问题标题】：website with horizontal scrolling, but separate pages具有水平滚动但页面分开的网站
【发布时间】：2012-08-17 07:34:04
【问题描述】：

我想创建一个带有滚动布局的网站。像这样的东西： Example

但是将所有内容都放在一个 html 文档中，可能会使页面变得非常沉重，而且地址栏中的 url 不会因不同的页面而改变。

但是我怎样才能让网站像水平但在地址栏中有不同的页面或至少不同的 url？比如这个例子： example 2

提前致谢。

【问题讨论】：

标签： javascript jquery html layout horizontal-scrolling

【解决方案1】：

您作为示例的第二个网站只有一页。它使用锚点来标记他们所在的页面。您也可以通过让 JS 在启动时读取页面位置并自动移动到页面的该部分来做到这一点。作为示例 2 的这个站点也使用 ajax 在新页面被点击时加载它们。我会避免使用它，因为它会在页面滑动后加载时从幻灯片效果中减去。

建议：

使用 jQuery 制作动画
使用锚点标记其所在的“页面”以供浏览器导航使用
在初始页面加载后使用 ajax 加载其他页面（如 Casey 所说）

【讨论】：

感谢您的回复。正如我在上一篇文章中解释的那样，我不擅长 ajax。我希望网站有页面，例如：example.com/music。或类似这样的哈希。正如我在上一篇文章中留下的链接，你能解释一下如何拥有这样的东西吗？谢谢
@Dan - 只需从$('#wrapper').scrollTo 行下方删除 return false。

【解决方案2】：

您发布的第二个示例仍然在一个 HTML 文档中包含所有内容。唯一的区别是作者添加了一些逻辑，在页面更改时将哈希附加到 url，并且可能有一些 javascript 在页面加载时检查该哈希并预滚动到指定页面以保持持久性。

如果您想采用不同的方式，并阻止所有内容包含在您的 HTML 文档中，您可以使用 ajax 填充“屏幕外”内容。

// when a link is clicked...
$.get('/page2', function(response){
    // load the content into an off-screen div
    $('.offscreen-div').html(response);

    // Use some jQuery to slide in the screen here
    my_slide_method($('.offscreen-div'));

    // Update the url hash
    window.location.hash = '!/page2';
});

这是伪代码，但它应该可以帮助您入门。

【讨论】：

感谢您的回复。我不太擅长的是JS和ajax。我做了一个基本的网站：mersadesign.com/demo/scroll 所以你能解释一下，让我知道我应该根据这个基本布局添加什么。