修复标题偏移 html 锚点

Posted

技术标签:

【中文标题】修复标题偏移 html 锚点【英文标题】:fix header offsetting an html anchor 【发布时间】:2016-05-20 18:27:33 【问题描述】:

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

我下面的代码正在按照我希望的方式工作。我在 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>

【问题讨论】:

The only is issue i am getting with IE8. Can i get any help to fix this in ie8? - 当然......您所要做的就是描述“问题”,否则谁能提供帮助? 我已经更新了这个问题。请看一下。谢谢 【参考方案1】:

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

#anchor 
    position: relative;

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

80px 是顶部偏移量。

【讨论】:

以上是关于修复标题偏移 html 锚点的主要内容,如果未能解决你的问题,请参考以下文章

偏移html锚以调整固定标题[重复]

偏移html锚以调整固定标题[重复]

javascript 锚点偏移链接从一个页面到另一个页面偏移固定标题

html 锚点BUG, 求解决思路 。

锚点偏移

scss 当固定标头导致偏移时,Mixin固定锚点