a标签锚点定位(#)定位不准确


如果锚点定位(#)总是定位不准确,可能是因为网页头部使用fixed定位的原因

解决办法如下:

添加样式,偏移值为网页头部fixed定位元素的高度

.target-fix {
    position: relative;
    top: -60px; // 偏移值
    display: block;
    height: 0;
    overflow: hidden;
}

在要跳转的链接位置上添加隐藏元素

<!-- <a> 元素链接到下面部分 -->
<p><a href="#Section_further_down"> 跳转到下方标题 </a></p>

<!-- 要链接到的标题 -->
<div class="target-fix" id="Section_further_down"></div>
<h2>更下面的部分</h2>