手动添加浏览器历史记录条目（跨浏览器）

我不知道是否有可能以任何方式实现，我想要做什么。我有一些部分单页网站。事情是这样的：手动添加浏览器历史记录条目（跨浏览器）

<div class="page pageOne"></div> 

<div class="page pageTwo"></div> 

<div class="page pageThree"></div> 

<div class="page pageFour"></div>

当你打开该网站，2，3和第4页有display:none，第一个display:block。当我点击我的导航链接，当前的“页”淡出和你点击任何链接，则属于部分消失中的链接是这样的：

<a class="pageChange" href=".pageFour">Four</a>

而这里的jQuery代码：

$(".pageChange").click(function(e){ 
    e.preventDefault(); 
    var href = $(this).attr("href"); 
    $(".page").fadeOut(200); 
    setTimeout(function(){ 
     $(href).fadeIn(); 
    }, 200); 
});

什么是很明显的是，当我点击浏览器后退按钮，也不会掉色在前面的章节。它只是将返回到以前的网站我已经打开。

所以我的问题是：有没有办法在浏览器中添加一个历史记录，当点击一个链接？所以我可以按下后退按钮，它会淡入前一部分？
要点击一个链接之前获得的可见部分，我已经做到了这一点：

var currentPage = $(".page:visible").attr('class').split(' ')[1];

但不幸的是这是没有用的，我想要实现的。

我会很开心的不得了，如果有人能提供给我的，我怎么能处理这一些帮助（如果它甚至有可能）

来源

2017-07-26 Tobias Glaus

当然可以，使用pushState：https://developer.mozilla.org/en/docs/Web/API/History_API#Adding_and_modifying_history_entries –

@RoryMcCrossan感谢您的快速响应。所以你需要改变网址才能使之工作（这不会是c的问题）？ –

是的，网址必须改变。虽然你可以添加一个片段，所以你不会重定向或卸载当前页面，例如'foo.html＃bar' –

您必须使用浏览器History API更新URL。然后您可以使用onpopstate来检测来回移动，并相应地调用您的fadeIn和fadeOut方法。

来源

2017-07-26 08:19:02

我有超级类似的情况！我的朋友最好的解决方案是使用https://alvarotrigo.com/fullPage/你可以阅读代码，他如何在github上做的。基本上你必须记录滚动和稍后使用一个函数来回浏览。

来源

2017-07-26 08:22:38 Danish

我知道fullPage插件，但从来没有意识到你可以使用后退按钮来到上一节！谢谢！ –

我强烈建议你使用@TobiasGlaus也可以自己做，可能会导致你很多错误或将消耗时间。 – Danish

手动添加浏览器历史记录条目（跨浏览器）

回答

相关问题