最近在做我的“足球导航”网站的时候遇到一个网页内部锚点跳转后向下偏移一点,以避免被顶部固定导航栏遮住的需求。
网上搜索了一些方法,大多数都是利用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 内部锚点跳转上下偏移内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...