纯CSS实现网页内部锚点跳转时上下偏移的方法

这篇文章给大家分享的是有关纯CSS实现网页内部锚点跳转时上下偏移的方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司主营闽侯网站建设的网络公司,主营网站建设方案,App定制开发,闽侯h5重庆小程序开发公司搭建,闽侯网站营销推广欢迎闽侯等地区企业咨询

最近在做我的“足球导航”网站的时候遇到一个网页内部锚点跳转后向下偏移一点，以避免被顶部固定导航栏遮住的需求。

网上搜索了一些方法，大多数都是利用js在跳转时候进行控制，后来在一个国外开发者的个人博客上发现一个只用css实现的方法，觉得简洁的很，顺手将他的实现方法翻译过来。通常我们网页顶部的固定导航栏的的样式实现如下：

<div class="header" style="position: fixed; top: 0;"></div>

随后，会有一个跳转的a链接列表：

<ul>
  <li><a href="#section1">Anchor Text</a></li>
  <li><a href="#section2">Anchor Text</a></li>
</ul>

需求是点击上面每个a链接的时候，页面定位到相应id的锚点位置：

<div class="section" id="section1"></div>
<div class="section" id="section2"></div>

但是如果顶部有个position:fixed的div的话，定位到这个锚点的时候，锚点中内容的上部会被顶部固定的div遮住。解决方案是在每个定位内容处加一个空的页面锚点，将要跳转的页面元素id放到这个空元素上，并设置该空元素的css熟悉，以实现跳转时候的偏移。我们定义的空元素为这个类为anchor的div，同时将div的id设置为上面a链接要跳转的id：

<div class="anchor" id="section1"></div>
<div class="section"></div>
<div class="anchor" id="section2"></div>
<div class="section"></div>

该空元素的css属性如下：

.anchor{
  display: block;
  height: 60px; /*和顶部fix的高度一致*/
  margin-top: -60px; /*和顶部fix的高度一致*/
  visibility: hidden;
}

到这里，就实现我们要的内部锚点跳转的功能。

简而言之，这里的偏移值就是跳转时候空元素占据的高度，利用这个占位元素达到了我们需要的锚点跳转时候的偏移效果。

感谢各位的阅读！关于“纯CSS实现网页内部锚点跳转时上下偏移的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章题目：纯CSS实现网页内部锚点跳转时上下偏移的方法
浏览路径：https://www.cdcxhl.com/article44/ihhhee.html

成都网站建设公司_创新互联，为您提供品牌网站制作、微信公众号、App开发、网站设计、建站公司、定制开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联