Question

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

但是在单个html文档中包含所有内容可能会使页面变得非常沉重，并且地址栏中的URL也不会因不同的页面而改变。

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

提前致谢。

Answer 1

您发布的第二个示例仍然包含单个HTML文档中的所有内容。唯一的区别是作者添加了一些逻辑，当页面发生变化时会在网址中附加一个哈希值，并且可能会有一些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';
});

这是伪代码，但它应该让你开始。

Answer 2

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

建议：

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

网站有水平滚动，但单独的页面

2 个答案: