使用锚点标签链接ID时如何设置偏移？避免内容被导航栏遮挡

有几种不破坏页面布局的方法可以设置锚点跳转偏移：

• CSS scroll-margin-top 属性
  直接给目标锚点元素设置scroll-margin-top，值等于导航栏的实际高度，跳转时会自动预留出偏移空间，完全不影响原有布局：

  #text {
    scroll-margin-top: 80px; /* 替换成你的导航栏高度 */
  }
  

• 全局设置 scroll-padding-top
  如果页面内有大量锚点，不想逐个修改，可以给滚动容器（通常是html标签）设置全局偏移，所有锚点跳转都会生效：

  html {
    scroll-padding-top: 80px; /* 导航栏高度 */
  }
  

• 隐藏占位锚点法
  给目标位置添加一个隐藏的占位元素，把锚点绑定到这个占位元素上，原元素保持不变：

  <a href="#text-anchor"></a>
  
  <div id="text-anchor" style="position: relative; top: -80px; visibility: hidden;"></div>
  <h1>Text</h1>
  

  占位元素的top值设为负的导航栏高度，点击锚点时会定位到占位元素的位置，视觉上刚好让原标题避开导航栏。

内容的提问来源于stack exchange，提问作者Soma Juice