首页 > 技术文章 > 修正锚点跳转位置 避免头部fixed固定部分遮挡

xiaomaotao 2018-05-17 16:27 原文

如下锚点标签:

 

<div id="id1">

  <span class="kkAnchor"></span>

   正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文

</div>

 

设置 css 

.kkAnchor{display: inline-block;width:0.00001px;padding-top: 150px;margin-top: -150px;visibility: hidden;}

//注意:

A  :          padding-top: 150px;margin-top: -150px; 这里的值是你头部fixed 元素的高度。

B  :          若锚点动态生成,则动态添加去除<span class="kkAnchor"></span>

 

---------------------------------------------                       over                 --------------------------------------------------

 

参考:

https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header

https://css-tricks.com/hash-tag-links-padding/

 

 

 

 

 

 

 

 

 

 

参考:https://css-tricks.com/hash-tag-links-padding/

推荐阅读