最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯CSS实现网页内部锚点跳转时上下偏移代码示例解析
时间：2022-06-25 14:06:16 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下纯CSS实现网页内部锚点跳转时上下偏移代码示例解析，通过文章详细介绍了实现方法，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
通常我们网页顶部的固定导航栏的的样式实现如下：
随后，会有一个跳转的a链接列表：
需求是点击上面每个a链接的时候，页面定位到相应id的锚点位置：
但是如果顶部有个position:fixed的div的话，定位到这个锚点的时候，锚点中内容的上部会被顶部固定的div遮住。解决方案是在每个定位内容处加一个空的页面锚点，将要跳转的页面元素id放到这个空元素上，并设置该空元素的css熟悉，以实现跳转时候的偏移。我们定义的空元素为这个类为anchor的div，同时将div的id设置为上面a链接要跳转的id：
该空元素的css属性如下：
.anchor{
display: block;
/*和顶部fix的高度一致*/
margin-top: -60px; /*和顶部fix的高度一致*/
visibility: hidden;
}
到这里，就实现我们要的内部锚点跳转的功能。
简而言之，这里的偏移值就是跳转时候空元素占据的高度，利用这个占位元素达到了我们需要的锚点跳转时候的偏移效果。
相关文章
- 以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍 12-31
- 未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍 12-31
- 未定事件簿左然破浪远行怎么样 12-31
- 桃源深处有人家行医问诊怎么玩 12-31
- 恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍 12-31
- 阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍 12-31