2

我有一个带有 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 中的演示

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

4

3 回答 3

10

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

Usinghistory.replaceState()的另一个好处是，当用户使用浏览器的后退按钮时，它不会首先向上滚动。

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

请参阅工作 js-fiddle。

于 2014-04-15T13:11:31.607 回答
10

如需更多跨浏览器哈希更新，您可以使用此 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 上的所有旧版本（我不关心我的项目中的旧浏览器，所以我没有测试这个解决方案）。

于 2015-01-09T11:22:19.413 回答
6

我将它用于 Bootstrap v4：

$(window).on('activate.bs.scrollspy', function(e) {
    history.replaceState({}, "", $('.nav-item .active').attr("href"));
});
于 2018-01-17T17:24:27.620 回答