anchor-link-with-fixed-header

摘要：一般常见于文档页面，复现如下点击右侧的目录，快速定位至，结果被遮住为方便观察，设置。代码给每个锚点增加属性解决后效果纠正偏移后，能准确定位，且不影响页面布局。修复后的代码原创说明此篇文章记录于年月日实际项目开发中遇到的问题。

当页面中带有position:fixed的header时，通过id进行定位时，一般会有偏差。一般常见于文档页面，复现如下：
点击右侧的目录，快速定位至title2，结果被header遮住（为方便观察，header设置opacity:0.95）。

期望能实现准确定位。

demo代码：

  
  
  
  



  

    
Header Here
    

      
title1
      

      
title2
      

      
title3
      

      
title4
      

    
    

      title1
      title2
      title3
      title4
    
  

给每个anchor设置偏移，纠正这个偏差。

给每个锚点h3增加css属性：

#app #main h3::before {
  content: "";
  display: block;
  height: var(--header-height);
  margin-top: calc(var(--header-height) * -1);
  visibility: hidden;
}

纠正偏移后，能准确定位，且不影响页面布局。

  
  
  
  



  

    
Header Here
    

      
title1
      

      
title2
      

      
title3
      

      
title4
      

    
    

      title1
      title2
      title3
      title4
    
  

此篇文章记录于2019年8月1日实际项目开发中遇到的问题。

参考自： fixed-page-header-overlaps-in-page-anchors

转载请注明出处，谢谢。