Question

我不知道是否有可能以任何方式实现，我想做什么。我的单页网站有一些部分。像这样：

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

显而易见的是，当我点击浏览器后退按钮时，它不会淡化上一部分。它将返回到我打开的上一个网站。
< br />所以我的问题是：有没有办法在点击链接时在浏览器中添加历史记录条目？所以我可以按后退按钮，它会淡化上一节的内容。
要在点击链接之前获取可见部分，我已经这样做了：

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

但不幸的是，这对我想达到的目标毫无用处。

如果有人可以帮助我解决这个问题（或者甚至是可能的话），我会非常高兴。

Answer 1

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

Answer 2

我有超级相似的情况！我的朋友将使用的最佳解决方案https://alvarotrigo.com/fullPage/您可以阅读代码，了解他在github上的表现。基本上你必须使用一个来回浏览功能来记录滚动和后来的处理。

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

2 个答案: