Question

这让我发疯了。如果您在同一页面上有锚点导航，则在调用popstate时，浏览器会自然地将您返回/转发到历史记录中该链接的位置。

可以假设您可以通过e.preventDefault（）在单击事件中禁用哈希跳转。 - 但到目前为止情况并非如此。

在大多数现代浏览器中，我已经能够通过存储类似$（window）.scrollTop（）;在变量中并在popstate中调用它：$ window.scrollTop（somevar）;

但是在Safari中，这种解决方法会在重定位到指定的scrollTop之前导致原始锚位置的快速blip或flash - 这使得它不是解决方案

在尝试了各种各样的想法之后，似乎找到我需要的唯一方法就是找到一种方法让Safari以Chrome或FF的方式处理这些锚点，或者以某种方式完全禁用它们的popstate想法。

这是前面提到的覆盖的示例（在chrome，FF等中工作）

var scrollY;

$(window).on('scroll', function(e) {
    scrollY = $window.scrollTop();
});

$(window).on('popstate', function(e) {
    // some other page location, not the history #hash
    $(window).scrollTop(scrollY);
});

Answer 1

<强>解决

据我所知，没有明显的方法可以实现这一点，所以我把时间花在解决方法上。我没有试图停止哈希，而是通过暂时将容器位置固定+当前滚动位置然后在页面转换功能完成后删除调整来实现所需效果。

var scrollY;

$(window).on('scroll', function(e) {
    scrollY = $window.scrollTop();
});

$(window).on('popstate', function(e) {
    $(window).scrollTop(scrollY);
    $('.container').css({
        'position': 'fixed',
        'top': '-'scrollY+'px'
    });
    yourFunction(); // contains animation sequence / css removal
});

从Safari中的popstate事件禁用/覆盖锚点跳转

1 个答案: