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来操纵网址和导航历史记录，而不会跳转到新推送的文档片段。

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

1 个答案: