0

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

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

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

提前致谢。

4

2 回答 2

3

您发布的第二个示例仍然在一个 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';
});

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

于 2012-08-21T22:05:16.970 回答
0

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

建议：

  • 使用 jQuery 制作动画
  • 使用锚来标记它所在的“页面”以供浏览器导航使用
  • 在初始页面加载后使用 ajax 加载其他页面（如 Casey 所说）
于 2012-08-21T22:06:44.863 回答