纯CSS完成网页页面內部锚点自动跳转时左右偏位

日期:2021-02-27 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

近期在做我的“足球导航栏”网站的情况下遇到1个网页页面內部锚点自动跳转后向下偏位1点,以免被顶部固定不动导航栏栏遮挡住的要求。

在网上检索了1些方式,大多数数全是运用js在自动跳转情况下开展操纵,后来在1个海外开发设计者的本人blog上发现1个只用css完成的方式,感觉简约的很,随手将他的完成方式汉语翻译过来。一般大家网页页面顶部的固定不动导航栏栏的的款式完成以下:

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

接着,会有1个自动跳转的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遮挡住。处理计划方案是在每一个精准定位內容处加1个空的网页页面锚点,即将自动跳转的网页页面元素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的高宽比1致*/
  margin-top: ⑹0px; /*和顶部fix的高宽比1致*/
  visibility: hidden;
}

到这里,就完成大家要的內部锚点自动跳转的作用。

简而言之,这里的偏位值便是自动跳转情况下空元素占有的高宽比,运用这个占位元素做到了大家必须的锚点自动跳转情况下的偏位实际效果。

到此这篇有关纯CSS完成网页页面內部锚点自动跳转时左右偏位的示例编码的文章内容就详细介绍到这了,更多有关CSS 內部锚点自动跳转左右偏位內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!