纯CSS实现网页内部锚点跳转时上下偏移的示例代码

网页制作 2024/11/14 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

网上搜索了一些方法，大多数都是利用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,内部锚点,跳转,上下偏移

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“纯CSS实现网页内部锚点跳转时上下偏移的示例代码”

暂无纯CSS实现网页内部锚点跳转时上下偏移的示例代码的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月14日

纯CSS实现网页内部锚点跳转时上下偏移的示例代码

CSS,内部锚点,跳转,上下偏移

css锚点定位被顶部固定导航栏遮住的解决方案

CSS书写格式、一个手机页面的基本结构详解

评论“纯CSS实现网页内部锚点跳转时上下偏移的示例代码”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接