Firefox - 使用 jQuery 航点在滚动时更新 window.location.hash

Question

BLUF：使用 jQuery Waypoints 使用滚动到元素的 ID 更新 location.hash 会导致 FF 中的滚动冒泡/卡顿，但 Chrome 或 IE 不会。

问题： 我正在使用jQuery Waypoints 做一些事情，因为用户滚动浏览具有这种基本布局的表格：

____________________________________________________
| <tr class="category" id="cat1">Category One</tr> |
|   Cell          |    Cell       |   Cell         |
|   Cell          |    Cell       |   Cell         |
|   Cell          |    Cell       |   Cell         |
____________________________________________________
| <tr class="category" id="cat2">Category Two</tr> |
|   Cell          |    Cell       |   Cell         |
|   Cell          |    Cell       |   Cell         |
|   Cell          |    Cell       |   Cell         |

我想做的一件事是将视口顶部的.category 行的ID 附加到window.location。这个 jQuery 在 Chrome 34 和 IE 中工作，但在 FF 28 中它会导致“冒泡”行为，即浏览器会尝试跳回以将元素放在视口顶部，即使用户不断向下滚动强>。我在这里注释掉了preventDefault，因为虽然它修复了FF 中的跳转，但它也阻止了脚本在到达第一个.category 元素后更新哈希。有没有人在更新 FF 中的location.hash 时遇到过类似的问题，或者知道如何解决它？

$( '.category').waypoint(function() {
    //strip current hash from window.location
    window.location.hash.replace('#','');
    //store waypoint element's id
    var setHref = $(this).attr('id');
    //set id as location.hash
    window.location.hash = setHref;
    //e.preventDefault();
    return false;
}, { context: 'section' });

Answer 1

这是更改location.hash 的核心功能：它会将您滚动到哈希引用的片段。使用location.hash 无法绕过它。

对于相当现代的浏览器，您可以使用 pushState 或 replaceState 来操作 URL 和导航历史记录，而不会导致跳转到新推送的文档片段。