如何实现锚点链接跳转至锚点元素下方的指定位置？

更靠下的解决方案 #

当然可行，给你几个实用的解决办法，按需选择：

• 用scroll-margin-top精准控制锚点滚动位置
  这是最推荐的方案，专门针对锚点滚动场景，不会改变页面原有布局。直接给目标容器或内部的h2设置滚动外边距即可：

  /* 给整个contact容器设置 */
  #contact {
    scroll-margin-top: 50px; /* 数值按需调整，越大h2显示位置越靠下 */
  }
  
  /* 或者直接给h2单独设置 */
  #contact h2 {
    scroll-margin-top: 50px;
  }
  

• 调整h2的内边距/外边距
  如果不需要太精准的滚动控制，直接修改h2的顶部间距也能达到效果：

  #contact h2 {
    padding-top: 60px; /* 用padding不会干扰周围元素的间距 */
    /* 也可以用margin-top: 60px; 但要注意可能和其他元素的边距叠加 */
    margin-top: 0; /* 清除h2默认的上边距避免干扰 */
  }
  

• 用定位空元素做锚点
  之前移id到空div没成功？试试给空元素加绝对定位，放在h2上方合适的位置：

  <div id="contact" style="position: absolute; top: -50px; left: 0;"></div>
  <div class="test">
    <h2>Contact</h2>
    Kontakt me today
  </div>
  

  调整top: -50px的数值，负值越大，h2在页面中显示的位置越靠下，这个方法完全不影响原布局，适合有图片等元素干扰的场景。

内容的提问来源于stack exchange，提问作者Janik.cc