正在使用scrollspy更新地址栏窗口的位置哈希

Question

我有一个带有scrollspy的菜单（使用twitter boostrap）。我想在用户向下滚动到下一节时更新window.location.hash。

当用户向下滚动时，以下代码起作用：

$(window).on('activate.bs.scrollspy', function (e) {
  location.hash = $("a[href^='#']", e.target).attr("href") || location.hash;
});

然而，当用户向上滚动时，它并不能很好地工作。

其原因是，设置新的location.hash会触发浏览器向相应的锚点导航。这会引发连锁反应，用户会立即出现在页面顶部。

js-fiddle 演示

现在，解决这个问题最简单的方法是什么？

Answer 1

可以使用HTML5历史记录更改URL的状态，而不会触发浏览器遵循新状态。并非所有浏览器都支持此功能。

使用history.replaceState()还有一个额外的好处，即当用户使用浏览器的后退按钮时，它不会首先向上滚动。

$(window).on('activate.bs.scrollspy', function (e) {
    history.replaceState({}, "", $("a[href^='#']", e.target).attr("href"));
});

请参阅工作js fiddle。

Answer 2

对于更多跨浏览器哈希更新，您可以使用此JS:

$(window).on('activate.bs.scrollspy', function(e) {
  var $hash, $node;
  $hash = $("a[href^='#']", e.target).attr("href").replace(/^#/, '');
  $node = $('#' + $hash);
  if ($node.length) {
    $node.attr('id', '');
  }
  document.location.hash = $hash;
  if ($node.length) {
    return $node.attr('id', $hash);
  }
});

它暂时删除搜索到的哈希，然后通过window.location添加它，然后恢复有问题的哈希。不幸的是，我不知道这个解决方案的确切兼容性范围，但IE9肯定是受支持的，可能也支持IE上的所有旧版本（我不在乎我的项目中的旧浏览器，所以我没有测试这个解决方案）。

Answer 3

我将其用于引导v4:

$(window).on('activate.bs.scrollspy', function(e) {
    history.replaceState({}, "", $('.nav-item .active').attr("href"));
});