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

我想创建一个滚动布局的网站。大概是这样的：

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

但是，我怎么能像水平的网站，但不同的网页或至少不同的网址在地址栏？例如这个例子：

---

提前感谢。

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

如果您希望采用不同的方式，并防止HTML文档中包含所有内容，那么可以使用ajax填充“屏幕外”内容

---

这是一段伪代码，但应该让您开始使用。

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

如果您希望采用不同的方式，并防止HTML文档中包含所有内容，那么可以使用ajax填充“屏幕外”内容

---

这是一个伪代码，但应该让您开始使用。

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

建议：

• 对动画使用jQuery
• 使用锚定标记其所在的“页面”，以供浏览器导航使用
• 在初始页面加载之后，使用ajax加载其他页面（正如Casey所说）

---

以您的第二个网站为例，它只有一个页面。它使用锚来标记它们在哪一页上。您还可以让JS在页面启动时读取页面位置，并自动移动到页面的该部分。作为示例2，这个站点还使用ajax在单击新页面时加载它们。我会避免使用它，因为当页面在幻灯片之后加载时，它会从幻灯片效果中减去
建议：
• 对动画使用jQuery
• 使用锚定标记其所在的“页面”，以供浏览器导航使用
• 在初始页面加载之后，使用ajax加载其他页面（正如Casey所说）

---

感谢您的回复。我不太擅长JS和ajax。我对我的网站做了一个基本的介绍：那么你能解释一下吗？根据这个基本的布局，让我知道我应该添加什么。谢谢你的回复。我不太擅长JS和ajax。我对我的网站做了一个基本的介绍：那么你能解释一下吗？根据这个基本的布局，让我知道我应该添加什么。谢谢你的回复。正如我在上一篇文章中所解释的，我不擅长ajax。我希望该网站有网页，如：example.com/music。或者类似于hash。当我在上一篇文章中留下链接时，你能解释一下如何拥有这样的东西吗？Thanks@Dan-只需从

$（“#包装器”）下方删除return false。滚动至

行。感谢您的回复。正如我在上一篇文章中所解释的，我不擅长ajax。我希望该网站有网页，如：example.com/music。或者类似于hash。当我在上一篇文章中留下链接时，你能解释一下如何拥有这样的东西吗？Thanks@Dan-只需从

$（“#包装器”）下方删除return false即可。滚动至

行。

// 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';
});