Javascript 在页面之间创建带有动画的“单页面”站点

我很想知道什么是用来产生效果的，比如这个网站模板：

我想有一个单一的菜单和背景，而一旦我点击菜单链接，它会触发新页面滑入视图，而不会被重定向到新页面，导致浏览器重新加载新页面，等等。这是一个平滑而美好的事情

我不是在寻找要使用if JQuery的函数以外的代码，我应该寻找什么样的效果来实现这一点

---

只要给我指出正确的方向：

现在有很多方法。。这是一种简单的方法，但不是一种可维护的方法

是在一个页面中的所有网站内容，并将每一个在DIV中的页面考虑为“

”。

<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us  page goes here </div>

etc...

当用户点击到其他页面的链接时，比如说“联系我们”页面，您将隐藏家长并滑动“联系我们”页面

$('.contact-us-link').click(function(){
    $('.home-page').hide(1000);
    $('.contact-us-page').show(1000);
})

就这样：

这样做的缺点是没有路由

所以要解决这个问题，你必须使用像backbone.js这样的东西 这需要一段时间来了解它

---

这只是一个关于如何工作的简单想法

有很多方法可以实现你的愿望，但这是我对如何在概念上实现它的建议：

通过设置内容容器位置的动画来设置内容的动画，这会给页面带来一种平滑的感觉。应该很清楚这一点。请记住，您希望拦截锚的正常行为，因此要么返回false，要么同时返回两者

使用电子邮件获取您的内容。您可以使用添加到链接中的href属性来获取正确的内容。然后将事件绑定到该方法。您离开href的原因是为了有一个优雅的回退：如果代码出现问题，如果用户禁用了javascript，或者只是在不支持javascript的浏览器上导航，他仍然能够访问您的内容

这是实现你想要的目标的两个基本步骤。如果您想进一步优化您的站点，请尝试考虑以下事项：

谨慎使用loading.gifs，让您的网站看起来更具响应性

不双重服务内容：检查用户是否正在点击当前显示页面的链接，并且不再获取内容；除了让你的用户看起来很傻之外，这也会让无用的服务器负载变得无关紧要，但仍然很重要。尽管如此，还是要考虑你的用户！告诉他，通过巧妙地使用UI，该链接已被禁用

操纵浏览器历史记录：使用。你的网站将更容易访问，更用户友好，更SEO友好，也将看起来更先进

---

为什么不以该页面的源代码为例呢？谢谢你的标题编辑，我不想完全照搬他们的作品，给猫剥皮的方法不止一种。我只需要每个人的投入。有些人在某些方面更有经验，可能会说一件事，而其他人可能会说另一件事。也许该模板的代码设置很差，可能会更有效。我不使用他们的源代码作为例子的原因有很多：如您所提到的，这样做的缺点是：不可维护，没有路由。缺点你们并没有提到：不是很容易访问，并没有退路，并没有搜索引擎优化。路由不需要backbone.js。现在HTML5有了一些漂亮的解决方案@你说有一些漂亮的解决方案是什么意思？您是否介意提供一些例子，说明如何使用html5来完成这项任务我在我的回答的最后做了。@Sunyatasattva，会有搜索引擎优化，因为google crawler不会启用javascript，所以会向它显示div，它会读取内容。。html5仍然不受支持，因此这打破了所有关于回退支持的讨论，而且如果用户没有JavaScript，他仍然能够读取内容并访问它。。不，html5的路由功能根本不是一个好的解决方案，它还不成熟，也没有得到很好的支持。。另一方面，主干将在每个浏览器中工作！所以我不认为html5是答案here@codeiz搜索引擎爬虫将能够看到内容，但不幸的是，看到内容并不是SEO的首要要求。还必须对内容进行正确的索引：在这个解决方案中，内容没有分离，因为所有内容都在一个页面中，而页面只是虚拟的。所以页面不可能有不同的标题、URL等等。这可能适用于一个小型的投资组合类网站，但根本不适用于博客。我希望我能更深入地了解你的意思，但等我对你所说的有了更好的理解后，我会尝试稍后再来看看你的答案。谢谢你对这个问题的贡献！什么是你需要更多的帮助

---

th？或者是一些不清楚的事情？我只是还没有完全理解JQuery，我一直在学习在线课程，虽然这些课程帮助我理解语法和所有文档。例如，我不知道拦截锚的正常行为意味着什么，你现在帮不上忙。。我只需要继续学习，我只学了3天JQuery，一次学了几个小时。我非常了解HTML和CSS，所以不用担心，我不会跳到前面去；我只是想通过流畅的动画和JQuery可以实现的其他功能，让我的页面更具交互性或趣味性。继续玩，这是最好的学习方式。顺便说一下，拦截锚的正常行为意味着，通常情况下，单击锚元素会将用户重定向到其href属性，即单击链接会将您带到其他地方。使用javascript，您可以防止这种行为，并在单击链接时执行其他操作，而不是让浏览器加载新页面。

$('.contact-us-link').click(function(){
    $('.home-page').hide(1000);
    $('.contact-us-page').show(1000);
})