纯CSS实现锚点跳转位置上下偏移的办法

最新推荐文章于 2024-07-20 16:26:01 发布
最新推荐文章于 2024-07-20 16:26:01 发布
阅读量1w 收藏 3
点赞数 1
分类专栏： css 文章标签： css

昨天在sf的时候看到了一位朋友的提问，是问如何使页面上的a标签被点击时跳转的锚点的位置往下偏移一点，不会被最上方的header给遮盖。当时看到这个问题也没想出纯CSS的解决方法，以为只有用js才能实现，后来另一位朋友的解答，恍然大悟，在他给出的方法上加以修改，完美实现了纯CSS的解决方案

HTML:

这里写图片描述

CSS:

这里写图片描述

效果图：

这里写图片描述

创建了一个隐藏的div，其高度和top都是等于fiexd的顶部的高度

这里写图片描述

这里写图片描述

我们可以发现，新增的隐藏快的目的就是就是将我们的内容撑下来从而展现在页面上，而不是被fixed的内容所覆盖(因为absolute元素的定位是根据relative来决定的，所以这里隐藏快的位置始终在文字的top等于-50px的位置)

tian361zyc
关注
专栏目录
JQ实现鼠标滚动或点击导航栏标签时锚点跳转
weixin_52028253的博客
06-01 597
JS   <script>      $(function () {              $(window).scroll(function () {         &nb
【React】锚点效果实现（点击跳转定位位置）（内含demo）
热门推荐
Candy_home的专栏
06-19 1万+
锚点：超链接的一种形式，快速定位到想要看的位置，常用在文章目录等位置。那么问题来了React不支持原生锚点的书写方式所以怎么在React里实现类似锚点的效果我的解题思路1.在 url里 使用 anchor 参数2.页面 解析 是否有anchor参数对应的id3.有对应id的话, 滚动到相应位置代码实践1.在 url里 添加 anchor 参数                            ...
CSS解决链接锚点定位偏移的代码
12-11
那假如我现在要求这个位置不是在顶端，而是离顶端有一定距离。 先看看我实现的方法例子： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>锚点位置偏
纯CSS实现网页内部锚点跳转时上下偏移的示例代码
biwenjiejie的博客
12-31 751
最近在做我的“足球导航”网站的时候遇到一个网页内部锚点跳转后向下偏移一点，以避免被顶部固定导航栏遮住的需求。 网上搜索了一些方法，大多数都是利用js在跳转时候进行控制，后来在一个国外开发者的个人博客上发现一个只用css实现的方法，觉得简洁的很，顺手将他的实现方法翻译过来。通常我们网页顶部的固定导航栏的的样式实现如下： 1 <div class="header" style="position: fixed; top: 0;"></div>
CSS的基础知识————小菜鸟
最新发布
say_666_的博客
07-20 712
CSS的基础知识
html锚链接怎么调整位置,锚点链接跳转后位置上下偏移一定位置方法
weixin_42138780的博客
06-04 2226
请注意，本文编写于 1621 天前，最后修改于 804 天前，其中某些信息可能已经过时。因为想把评论区改成无限嵌套，css样式只有第二级评论才会缩进，下面的更低级评论都不会缩进，这样就需要在评论内容前加上@XX的字样，然后点击这个字样，可以通过锚点链接跳转到上一级的评论的位置。效果是这样的：然后问题就来了~点击@测试站点，跳转到第一条评论时候，部分内容被上面的固定导航遮挡住了~你也许也会遇到这样的...
解决锚点链接跳转后位置上下偏移的偏移的办法
luoyu6的博客
10-05 1万+
应用场景：我们把导航固定在页面顶部的时候，点击锚链接跳转到相应的部分时，很可能导航把页面的内容覆盖了，像这样 导航把文字覆盖了， 原因就是我们设置了padding这类css属性 正常盒模型的宽度：width=width+padding+border,其实就是导航盖住了盒模型的padding，覆盖原因就不过多解释了。我们还是说下解决办法吧 问题：既然是锚链接，要跳转，就要用href呀，同时，...
有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
lianmindiandi
06-22 945
有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
jquery 仿锚点跳转到页面指定位置的实例
10-20
知识点一：jQuery的offset()方法...通过以上知识点，我们可以了解到如何使用jQuery来仿制原生的锚点跳转功能，实现页面内的指定位置跳转。这不仅可以提升用户的浏览体验，也可以在页面上实现更为复杂和动态的交互效果。
使用锚点跳转时出现位置偏差原因及解决办法
辉兔子
06-18 586
点击跳转锚点位置出现偏移
点击带锚点的网址后，如何让网页位置向下偏移一小段距离
weixin_38047955的博客
03-24 1249
点击带锚点的网址后，如何让网页位置向下偏移一小段距离 参照 stackoverflow 的做法，在主体内容前加一个暗锚 a class="target-fix">a> artivle>主体内容...article> 将锚点进行偏移，并隐藏占位： .target-fix { position: relative; top: -44px; // 偏移值 disp
锚点跳转偏移位置（当顶部导航设置固定定位时挡住锚点区内容时）
Candy_mi的博客
11-17 3764
设置虚锚点 &lt;a name="index" style=" position: relative;top: -80px;display: block;height: 0;overflow: hidden;"&gt;&lt;/a&gt;   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;
css上下跳动
qq_46063425的博客
09-17 1571
css上下跳动 效果： html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./index.css"/> </head> <body> <div class="loader"&
vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法
qq_41973957的博客
05-10 5947
vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案
html锚点定位，无法定位到固定位置，向上或向下偏移？
游九尘的博客
04-11 347
给锚点加点击事件，事件里写入定时器，改变滚动条的距离。
使用锚点链接做出页面切换效果
qq_52622178的博客
04-16 958
锚点链接 1.锚点链接的使用 1.使用a标签应用 herf 属性，href 属性="#id名" 2.只要点击了超链接的对象就会跳到指定位置 2.利用锚点链接在同一个页面中的切换效果： 代码如下： <style> /* 清楚默认空隙 */ *{ margin: 0; padding: 0; } /* 清楚<a>标签的默认下划线样式 */ a{
深入理解CSS定位中的偏移
果车的博客
01-12 1423
CSS中有三种基本形式的布局机制：普通流、浮动和绝对定位。利用定位可以准确定义元素的位置，或者是元素相对于其父元素、另一个元素、浏览器窗口的位置。 一、Position定位： 五个值： static relative fixed absolute sticky 1.static： HTML元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到投top、bottom、left、right的影响。 HTML代码： <div class="box1"> </div>
vue 解决a标签锚点跳转位置上下偏移
08-31
可以通过给目标路由设置一个滚动偏移量来实现锚点跳转时的位置偏移。例如： ```javascript const router = new VueRouter({ mode: 'hash', // 或者其他模式 ... scrollBehavior(to, from, savedPosition) { if ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值