jQuery scrollTop在Firefox中无法正常工作

Kickar 发表于 Dev

踢球

我正在建立一个使用scrollTop()来自Jquery的功能的单页网站。

这是我的代码：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);
        var targetOffset = $target.offset().top - 140;
        $('html, body').stop().animate({
            'scrollTop': targetOffset
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

它可以在Chrome，Safari en Vivaldi上正常运行，但是当我在FireFox中运行网站时，并不需要我的targetOffset。有没有办法解决此问题，同时又不影响其他浏览器？

该网站的预览可以在http://listycon.kiran.be上找到

编辑我做了屏幕截图以澄清问题，您可以在此链接上看到它：http : //kiranvanursel.tinytake.com/sf/MTYxMTg5XzEwMTM1Njk

似乎firefox在从a标签的href中获取.hash时遇到了一些麻烦。您可以尝试以下方法：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) { 
        e.preventDefault();
        var href = $(this).attr('href');
        href = '#' + href.split('#').pop();

        var $target = $(href).offset().top - 140;

        $('html, body').animate({
            'scrollTop': $target
        }, 900, 'swing', function () { 
            window.history.pushState("object or string", "Title", href);
        });
    });
});

从href属性中裁剪哈希值应该在每种浏览器中都有效。

也许“跳”是由设置引起的window.location.hash。

尝试使用html5 pushstate事件更新url 。我已经更新了代码块，我认为值得尝试

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。