offset().top -XX 在 Webkit v Firefox/IE 中给出不同的结果

Question

我正在尝试在具有固定 header.

的网站上实现到内部锚点的平滑滚动

如果我这样做：

scrollTop: $target.offset().top

我在所有浏览器中得到相同的结果，但如果我这样做：

scrollTop: $target.offset().top - 100

在 Webkit 浏览器中没问题，但在 Firefox 和 IE 中，滚动到锚点后，页面会进一步向上移动一点，因此 header.

下的标题被遮住了

脚本共：

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

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

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

和一个CodePen.

Answer 1

我通过向目标添加 padding-top 找到了解决方法。

offset().top -XX 在 Webkit v Firefox/IE 中给出不同的结果

offset().top -XX gives different result in Webkit v Firefox/IE

javascript

firefox

jquery

scroll

webkit