在使用 html锚点 时候一到那我们设置了 头部导航栏固定 ,就会出现 html锚点跳转 时候 位置偏移 , 锚点定位不准确 等问题,特别影响用户体验。

1632707618

 可以看到以上效果图 头部浮动 已经导致 锚点位置向上偏移 了,然后我们可以通过以下 任意两种方法修复锚点 位置偏移 的问题。

1632707966

使用 csstarget 选择器修复锚点位置偏移

.article-deviation:target{
    padding-top: 110px !important;
    /*或者*/
    margin-top: 110px !important;
}

 我们通过使用 target 选择器修复锚点位置偏移,其中使用 padding 还是 margin 以及 像素大小 可以根据 具体需求进行调整

target 完整使用示例

<!DOCTYPE html>
<html>
<head>
<style>
.article-deviation:target{
    padding-top: 110px !important;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1" class="article-deviation"><b>内容 1...</b></p>
<p id="news2" class="article-deviation"><b>内容 2...</b></p>

<p><b>注释:</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

通过 js 修复锚点位置偏移

 使用 js 修复锚点位置偏移,相对于 target 选择器 修复锚点位置偏移 要麻烦一些。

首先设置自定义属性 data-to

 我们需要将锚点 href 参数转到到自定义属性 data-to 里面

<ul class="article-dir">
    <li class="menu">
        <a href="javascript:;" data-to="category">分类</a>
    </li>
    <li>
        <a href="javascript:;" data-to="news">新闻</a>
    </li>
</ul>

<div id="category">.....</div>
<div id="news">.....</div>

然后通过js控制滚动

 通过获取 指定锚点目标位置 进行滚动,我们可以通过 scroll-top 参数进行 加减像素 来调整合适的滚动位置。

    $('.article-dir a').click(function () {
        var nav_to = $(this).data('to');
        if (nav_to != "#") {
            var to_div = $('#' + nav_to);
            $('html,body').animate({
                'scroll-top': to_div.position().top
            }, 0);
        } else {
            $('html,body').animate({
                'scroll-top': 0
            }, 0);
        }
    });

 关于 html修复锚点位置偏移 我们通过 两种不同的方式 已经 完美解决 了,相比于 网上千奇百怪的方法 这两种更靠谱一些,有兴趣的小伙伴可以尝试下。