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

最新推荐文章于 2024-06-18 14:30:05 发布
最新推荐文章于 2024-06-18 14:30:05 发布
阅读量1w 收藏 3
点赞数 1
分类专栏： css 文章标签： css

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

HTML:

这里写图片描述

CSS:

这里写图片描述

效果图：

这里写图片描述

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

这里写图片描述

这里写图片描述

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

tian361zyc
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【CSS】如何用CSS实现向右飞入的功能
u014458962的专栏
07-07 1388
说实话一直对CSS了解不深，日常只是用CSS调整个margin啦位置啦，有什么动态效果都用JS做。这次有个项目要更换模板，其中一个元素向右飞入页面（非匀速），平滑地停在页面中心的小动画很喜欢，但新模板里没有，就想研究一下人家是怎么做的。 首先找到控制它的class，是这样写的： .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } animation-n
CSS基础知识-五（CSS定位、左右布局方法）
张新丁
05-31 3263
一、CSS定位 1、Float:left / right /none;------左浮动/右浮动/无 2、Position:absolute;----绝对定位 3、Position:relative;-----相对定位（top/right/bottom/left） 注意： 父级（大div）             子级（子div） 1、     Relelative
解决锚点链接跳转后位置上下偏移的偏移的办法
热门推荐
luoyu6的博客
10-05 1万+
应用场景：我们把导航固定在页面顶部的时候，点击锚链接跳转到相应的部分时，很可能导航把页面的内容覆盖了，像这样 导航把文字覆盖了， 原因就是我们设置了padding这类css属性 正常盒模型的宽度：width=width+padding+border,其实就是导航盖住了盒模型的padding，覆盖原因就不过多解释了。我们还是说下解决办法吧 问题：既然是锚链接，要跳转，就要用href呀，同时，...
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>锚点位置偏
使用锚点跳转时出现位置偏差原因及解决办法
最新发布
辉兔子
06-18 444
点击跳转锚点位置出现偏移
html锚链接怎么调整位置,锚点链接跳转后位置上下偏移一定位置方法
weixin_42138780的博客
06-04 2180
请注意，本文编写于 1621 天前，最后修改于 804 天前，其中某些信息可能已经过时。因为想把评论区改成无限嵌套，css样式只有第二级评论才会缩进，下面的更低级评论都不会缩进，这样就需要在评论内容前加上@XX的字样，然后点击这个字样，可以通过锚点链接跳转到上一级的评论的位置。效果是这样的：然后问题就来了~点击@测试站点，跳转到第一条评论时候，部分内容被上面的固定导航遮挡住了~你也许也会遇到这样的...
vue下使用scrollIntoView()进行锚点跳转导致整个页面产生偏移的问题及解决办法
qq_41973957的博客
05-10 5654
vue下使用scrollIntoView()进行锚点跳转页面偏移问题及解决方案
css锚点定位不准确问题
头名字W的博客
11-12 4776
现象：当顶部导航栏固定时，点击锚点，会跳转到锚点以下。 #top{ position: fixed; height: 100px; top:0; left:0; z-index: 100; } 问题原因 点击超链接之后，跳到的锚点位置向下的偏移量就是fixed的头部的高度。 问题解决 1、设置所有锚点处的样式 css padding-top:100px; marg...
jquery锚点链接屏幕上下滚动效果
01-16
固定在页面右侧的锚点链接导航菜单，点击对应的导航栏目页面自动滚动到对应的锚链接名所在的位置，当前导航以抽屉式从右往左滑出显示，图标与CSS样式经过了加密处理，如果想要修改的话也可以自行修改使用，主要还是...
jquery锚点带动画跳转
07-07
jQuery 是一个广泛使用的JavaScript库，它提供了丰富的功能和简便的API，可以用来增强HTML和CSS的功能，包括实现锚点跳转的动画效果。本文将深入探讨如何使用jQuery实现锚点带动画跳转，并分享相关的知识点。 一、...
关于使用锚点时被顶部遮挡
08-07
在使用锚点的时候点击页面滚动到对应的位置,有时候有可能被顶部导航挡住,此时就可以使用改处理方式今天调整即可
js，jquery滚动/跳转页面到指定位置的实现思路
10-25
在Web开发中，有时我们需要实现用户从一个页面跳转到另一个页面，并且自动滚动到特定的位置。本文将详细介绍如何使用JavaScript和jQuery来实现这一功能。 首先，基本的思路是利用HTML的锚点（Anchor）机制。在源...
移动端页面滚动到指定位置，兼容安卓ios主流浏览器，scrollIntoView方法的兼容性问题
weixin_43402720的博客
02-28 4250
移动端页面滚动到指定位置，兼容安卓ios主流浏览器，scrollIntoView方法的兼容性问题
a标签锚点位置偏移
weixin_44066703的博客
03-09 1559
a标签的链接里加上#，div中给个id，名字需要一样，这样就能达到页面跳转效果，即锚点。 <a href="#form">锚点</a> <div id="form">表格</div> 但有时默认的跳转位置与自己需要该锚点到达的位置有所偏移，这时就可以用js调整一下： $('a').click(function () { var target = $(this).attr('href'); // target获取的是a标签里的链接 $('h
html锚点定位，无法定位到固定位置，向上或向下偏移？
游九尘的博客
04-11 289
给锚点加点击事件，事件里写入定时器，改变滚动条的距离。
移动端设置页面内容animation css3动画,IOS 手机上下滑动导致页面层级错乱问题
qq_15006083的博客
01-13 647
解决方案如下：ios 设置translate3d 属性会将动画渲染到最上面一层，从而导致层级错乱，在低层设置transform: translate3d(0, 0, 0);高层设置transform: translate3d(0, 0, 2px);设置translate3d动画在ios上导致层级错乱问题，设置了z-index为999也不行。这样子低层设置了动画就不会跑到高层上面显示。
a标签锚点链接跳转到当前页面指定位置未生效，附a标签的使用
weixin_46353030的博客
12-20 2651
原因 <a></a>内部和外部均没有文字内容，导致浏览器识别不到 传的id名字首字母没有小写 代码 第一种情况 <div id="jumphere">跳到这</div> <div> <a href="#jumphere"></a>//实现不了跳转 <a href="#jumphere">content</a>//可以实现跳转 </div> 第二种情况 //不可以实现跳转 <
CSS - 移动端 常见小bug整理与解决方法总结【更新中】
weixin_34409703的博客
10-28 199
常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题： 原理是因为：1px在手机上是使用2dp进行渲染的。换成 border: 0.5像素？是不行的！ ...
vue 解决a标签锚点跳转位置上下偏移
08-31
在Vue中解决a标签锚点跳转位置上下偏移的方法有很多种，下面我将介绍几种常用的方法。 1. 使用Vue Router的滚动行为功能。在Vue Router中，可以通过设置scrollBehavior属性来控制页面滚动行为。可以通过给目标路由设置一个滚动偏移量来实现锚点跳转时的位置偏移。例如： ```javascript const router = new VueRouter({ mode: 'hash', // 或者其他模式 ... scrollBehavior(to, from, savedPosition) { if (to.hash) { return { selector: to.hash, offset: { x: 0, y: 100 } // 设置纵向偏移量为100px } } } }) ``` 2. 在目标元素上通过ref属性标记，并通过Vue的$refs来操作元素。在Vue的模板中，可以使用ref属性来标记元素，然后可以通过Vue实例的$refs属性来获取到元素的实例，并进行操作。例如： ```html <!-- 模板 --> <a href="#target" @click="scrollToTarget">跳转到目标</a> ... <div ref="target" id="target">目标元素</div> <!-- Vue 实例中的方法 --> methods: { scrollToTarget() { const targetElement = this.$refs.target // 进行滚动操作，可以通过scrollTop属性或者其他滚动方法来控制滚动位置，再加上偏移量即可 } } ``` 3. 使用第三方库来实现滚动行为。除了Vue Router，还有一些第三方库可以用于处理滚动行为，如vue-scrollto、vue-scroll-behavior等。这些库提供了方便的API，可以轻松地控制滚动位置和偏移量。可以根据具体需求选择合适的库使用。 总的来说，以上是几种常见的在Vue中解决a标签锚点跳转位置上下偏移的方法。具体的使用方式可以根据实际需求选择合适的方法来实现相应的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值