最近在做我的[ 足球 导航]网站的时候遇到一个网页内部 锚 点跳转后向下偏移 一点 ，以避免被顶部固定导航栏遮住的需求。
网上搜索了一些方法，大多数都是 利用 js在跳转时候进行控制，后来在一个 国外 开发者 的 个人博客 上发现一个只用css实现的方法， 觉得 简洁的很，顺手将他的实现方法 翻译 过来。通常我们网页顶部的固定导航栏的的样式实现如下：
<div class="header" style="pos IT ion: fixed; top: 0;"></div>
随后，会有一个跳转的a链接列表：
<ul> <li><a hr ef=" # sectio n1 ">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{
dis play : block;
h ei ght: 60px; /*和顶部fix的高度一致*/
m arg in -t op: -60px; /*和顶部fix的高度一致*/
visibility: hidden;
}
到这里，就实现我们要的内部锚点跳转的功能。
简而言之，这里的偏移值就是跳转时候空元素占据的高度，利用这个占位元素达到了我们需要的锚点跳转时候的偏移效果。
到此这篇关于纯CSS实现网页内部锚点跳转时上下偏移的示例代码的 文章 就介绍到这了,更多相关CSS 内部锚点跳转上下偏移内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 纯CSS实现网页内部锚点跳转时上下偏移的示例代码 全部内容，希望文章能够帮你解决 纯CSS实现网页内部锚点跳转时上下偏移的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于纯CSS实现网页内部锚点跳转时上下偏移的示例代码的详细内容...