单页分页网站的后退按钮
我有一个单页的网站，主要依赖于jQuery。 作为一个组合，用户可以点击各种设计，其中jQuery将隐藏主页面，并根据查询字符串返回的内容重建设计页面。
问题是，想要回到主要投资组合页面的人自然会按下浏览器上的“返回”按钮，导致他们回到以前的任何网站（例如谷歌搜索）。 事实上，预期的行为是他们返回主要行为。
我的问题是，实现一种方式的最佳方法是什么，以便BACK按钮的function就像在多页网站上一样。 它会涉及实现我自己的一堆查询吗？ 什么是最好的选择。
非常感谢。 如果你想看到它在行动，网站就在这里 。
查看History.js库，处理现代浏览器并为旧版HTML4浏览器提供后备
https://github.com/browserstate/history.js/
在$(".mLink").click(function(){...的事件处理程序中$(".mLink").click(function(){...
每当您触发滚动时，您都可以添加这样的内容
case "mL0": $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo'); History.pushState(null, null, "?home"); break; case "mL1": $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo'); History.pushState(null, null, "?portfolio"); break; ...
美丽的投资组合网站，顺便说一句。
您可能想要查看HTML5 History API 。 有很多关于如何开始使用它的教程，但基本的要点是，当你使用jQuery加载一个新的“页面”时，你将它推入历史堆栈：
// After loading the new page... window.history.pushState({}, '', 'newpage.html');
这将使用户代理在URL栏中显示yoursite.com/newpage.html ，即使页面从未加载过。
Caniuse报告说历史API支持相当不错 。 通常的嫌疑人（IE 7和8）没有支持，但有可用的填充物 。
历史API的唯一警告（并且它是一个重要的）是这样的： 作为history.pushState的第三个（可选）参数传递的页面必须存在于您的服务器上 。 用户可以从URL栏复制URL并共享它，因此页面名称必须与真实页面相对应。 这样做的问题是，它似乎不适用于您的网站，因为您没有动态加载的单独页面。
在我看来，你的投资组合是一个连续的页面，所以我建议使用哈希url。 也就是说，url像yoursite.com/#about和yoursite.com/#contact 。 您可以更新window.location以在加载新页面时包含哈希（并且浏览器不会重新加载页面）。
window.location = '#new-page-that-was-just-navigated-to';
或者你可以更新window.location.hash 。 当您的网站加载此属性以确定应显示哪个页面时，您可以使用javascript检查哈希的内容。
$(document).ready(function() { switch(window.location.hash) { case 'home': // load home case 'about': // load about default: // load default page (index) } });
此外，您可以使用HashChange事件 （在MDN文档页面上提供polyfill）从HTML中抽象JS。 而不是这样做：
About Projects Contact
你可以这样做：
About Projects Contact
这样做的好处是您的链接具有有意义的href，并且您不必为站点上的每个链接添加事件侦听器。 只需为它们分配一个哈希并监听hashchange 。
编辑
请注意，这也适用于jQuery：
$(window).on('hashchange', function() { switch(window.location.hash) { case 'about': // load page case 'projects': // load page case 'contact': // load page default: // not found } });
您的内容通过AJAX在单个div中加载。 因此，回到之前的内容有点困难，因为您的内容会使用新内容进行更新。
您可以使用“history.pushState”根据您单击的菜单项更改URL …您可以在此网页上查看示例 – http://html5.gingerhost.com/ 。
BACK按钮通常转到上一个URL，而在AJAX页面中，URL本身不会更新。 您可以使用“history.pushState”显式更改URL，并且BACK将像您期望的那样工作。
这也将使您的网站搜索引擎友好