后退按钮在 chrome 中不起作用

Question

当单击哈希锚 (#) 时，我们使用 jscrollpane 来浏览一些 div。在 Chrome 中单击后退按钮时，地址栏中的 url 会发生变化，但浏览器不会导航回 div。在 Firefox 中，它确实会回到之前的 div。

http://www.sandbox.brightboxstudios.com/swings/test4.html

我尝试过各种各样的东西，包括插件、不同的 jquery 库版本。

此外，当 url 锚点不起作用时，我尝试将活动菜单项更改为活动的所有内容都不起作用，这很可能是因为我缺乏 JavaScript 知识。这也太棒了！

Answer 1

我尝试对您的代码进行此代码修复：

$('ul.nav a')
.unbind("click") // to remove your binding in my console
.bind('click',function(event){ // rebind event handler
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollLeft: $($anchor.attr('href')).offset().left
    }, 1500,'easeInOutExpo');
  event.preventDefault();

  // this is a trick:
  location.href = $anchor.attr('href');
  return false;
});

导航开始工作。自己试试吧。

Answer 2

我发现有一个问题几乎肯定会影响事情。

在您的 javascript 中的某处，哈希锚前面有一个正斜杠，使生成的 url 看起来像这样：

http://www.sandbox.brightboxstudios.com/swings/test4.html#/section3

注意# 散列之后的正斜杠，使其成为技术上无效的 URL（没有值 #/section3 的 id 或名称）。当我悬停链接时，它没有出现在状态栏中，只出现在结果 URL 中，这让我相信它与您正在使用的 address 插件有关（尽管我没有个人经验）。

返回按钮仅在 Firefox 中为我工作，因为前一个 URL 是一个没有哈希的 URL（即有效的 URL）。我很难用所有加载的插件来调试你的页面，但是看看你是否可以做一些事情来使这些 URL 有效并摆脱那个正斜杠。

除此之外，即使这只是一个演示，您也应该确保您没有重复 ids。您有多次出现#header 和#middle。最好在调试时（或总是，实际上）消除所有疑虑，并使用有效的标记。

希望这能让您更接近解决您的问题。