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

类别:技术 日期:2019-09-29 评论:0

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

网上搜索了一些方法,大多数都是利用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;
}

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

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

留言评论

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

推荐文章
软件作品
微信公号
  • 足球Plus微信公众号
最新留言
友情链接
推荐文章

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

软件作品
最新留言