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会触发浏览器导航到相应的锚点。这会引发连锁反应，用户将立即在页面顶部结束。

Demo in js-fiddle

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

Answer 1

对于更多跨浏览器哈希更新，您可以使用此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添加它，然后恢复相关哈希值。不幸的是，我不知道这个解决方案的确切兼容性范围，但IE肯定也支持IE上的所有旧版本（我不关心我的项目中的旧浏览器，所以我没有＆＃39; t测试这个解决方案）。

Answer 2

可以使用HTML5历史记录更改URL的状态，而不会触发浏览器遵循新状态。 This is not supported by all browsers

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

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

See working js-fiddle

Answer 3

我将它用于Bootstrap v4：

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

使用scrollspy更新地址栏window.location哈希

3 个答案: