修复了标头偏移 HTML 锚点的问题

fix header offsetting an html anchor

本文关键字：HTML 问题      更新时间：2023-09-26

我正在尝试清理我的锚点的工作方式。我有一个固定在页面顶部的标题，因此当您链接到页面中其他位置的锚点时，页面会跳转，因此锚点位于页面顶部，将内容留在固定标题后面。

我下面的代码正在按照我希望它工作的方式工作。唯一的问题是我在IE8上遇到的问题。当我单击跳转链接时，它会跳过它而不是正确的位置。

我可以得到任何帮助来修复 ie8 中的此问题吗？

<script>
    ! function(o, n) {
      var t = function() {
        var n = o(":target"),
          t = 100;
        n.length > 0 && o("html, body").stop().animate({
          scrollTop: n.offset().top - t
        }, 80)
      };
      o(n).on("hashchange load", function() {
        t()
      })
    }(jQuery, window);
</script>

我曾经用css解决这个问题：

#anchor {
    position: relative;
}
#anchor:after {
    content: "";
    position: absolute;
    height: 80px;
    width: 1px;
    top: -80px;
    left: 0;
}

80px 是顶部偏移量。

相关文章：