带有粘性标题的哈希滚动导航，偏移量在 Firefox 上不起作用

Question

我有一个带有顶部标题的网站，当滚动时，我的一半标题消失并且菜单固定在顶部。 导航使用哈希，通过单击我的菜单的链接，页面滚动到链接的#。 我添加了一个 jscript 来计算我的stickyheader 的高度，以将此高度添加到我的#link 中，以便我的目标显示在我的菜单下方。 它在 Chrome 和 safari 上完美运行，但在 Firefox 中，有一个问题，没有添加高度，所以我的标题显示在菜单下。 当点击“回到顶部”时，位置不正确，有一个偏移量......只有在firefox上也是如此。

我不知道你是否明白我的意思，所以这里有一个 jsfiddle 来看看它的实际效果：

http://jsfiddle.net/rHmAA/3/

这是我的 js：

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

        var target = this.hash,
            $target = $(target);

        var offset;
        if($('#stickyheader').css('position') == 'relative'){
            offset = $('#stickyheader').outerHeight(true)*2;
        }else{
            offset = $('#stickyheader').outerHeight(true);
        }
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - offset
            //--OFFSET--//
        }, 1500, 'swing', function () {
            window.location.hash = target;
        });
    });
});

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() === stickyHeaderTop+1) {
            $('#stickyheader').hide();
            console.log('p');
        }
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').fadeIn(500).css('position','fixed');
            $('#stickyalias').css('display', 'block');
            var mT = $('#stickyheader').css('height');
            $('#stickyheader').next('.post').css('marginTop', mT);
        }else{
            $('#stickyheader').css({
                position: 'relative',
            });
            $('#stickyheader').next('.post').css('marginTop', '0');
        }
    });
});

有人可以帮我吗？我不知道我做错了什么，

非常感谢您的帮助，

Answer 1

尝试将其用于滚动动画

 $('html, body').animate({
      'scrollTop': $target.offset().top - offset
       //--OFFSET--//
 }, 1500);