修正锚点跳转位置 避免头部fixed固定部分遮挡
如下锚点标签:
<div id="id1">
<span class="kkAnchor"></span>
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
</div>
设置 css
.kkAnchor{display: inline-block;width:0.00001px;padding-top: 150px;margin-top: -150px;visibility: hidden;}
//注意:
A : padding-top: 150px;margin-top: -150px; 这里的值是你头部fixed 元素的高度。
B : 若锚点动态生成,则动态添加去除<span class="kkAnchor"></span>
--------------------------------------------- over --------------------------------------------------
参考:
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
https://css-tricks.com/hash-tag-links-padding/
参考:https://css-tricks.com/hash-tag-links-padding/
修正锚点跳转位置 避免头部fixed固定部分遮挡的更多相关文章
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- zepto的scrollTo,实现锚点跳转
实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...
- 各种HTML锚点跳转方式
1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...
- jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
- 微信小程序 scroll-view 实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...
- html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- 使用JS模拟锚点跳转
A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...
- jQuery实现锚点跳转(就一行代码)
/* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...
随机推荐
- Atcoder Beginner Contest 124 解题报告
心态爆炸.本来能全做出来的.但是由于双开了Comet oj一个比赛,写了ABC就去搞那个的B题 还被搞死了. 回来写了一会D就过了.可惜比赛已经结束了.真的是作死. A - Buttons #incl ...
- 【51NOD1847】奇怪的数学题 min_25筛
题目描述 记\(sgcd(i,j)\)为\(i,j\)的次大公约数. 给你\(n\),求 \[ \sum_{i=1}^n\sum_{j=1}^n{sgcd(i,j)}^k \] 对\(2^{32}\) ...
- n98-magerun2.phar
installl: 1,cd /usr/local/bin && curl -O https://files.magerun.net/n98-magerun2.phar 2,chmod ...
- 飞旋treap
虽然叫做非旋treap但是飞旋treap很带感所以就用这个名字了(SB) 这个东西是真的好写...... 主要的两个函数只有两个,rotate和splay,split和merge. merge就是大家 ...
- Kubernetes之服务发现及负载Services
Service 概述 kubernetes 中的pod是有生生灭灭的,时刻都有可能被新的pod所代替,而不可复活(pod的生命周期).一旦一个pod生命终止,通过ReplicaSets动态创建和销毁p ...
- cacti报警邮件的设置
众所周知,用Linux系统自带的sendmail发送邮件是有限制的,可能对有些邮箱无法正常发送,导致报警邮件不能够及时发送到,因此就可能会产生不必要的麻烦!对此,我们可以用其他方法来发送邮件,就是在c ...
- CMDB服务器管理系统【s5day90】:API验证
1.认证思路刨析过程 1.请求头去哪里拿? 1.服务器端代码: def test(request): print(request) return HttpResponse('你得到我了') 2.客户端 ...
- windows下搭建vue开发环境+IIS部署
原创]win10下搭建vue开发环境 https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...
- DirectX11 With Windows SDK--06 DirectXMath数学库
前言 xnamath.h原本是位于DirectX SDK的一个数学库,但是现在Windows SDK包含的数学库已经抛弃掉原来的xnamath.h,并演变成了现在的DirectXMath.h.其实本质 ...
- 第十二节:Lambda、linq、SQL的相爱相杀(1)
一. 谈情怀 Lambda.Linq.SQL伴随着我的开发一年又一年,但它们三者并没有此消彼长,各自占有这一定的比重,起着不可替代的作用. 相信我们最先接触的应该就是SQL了,凡是科班出身的人,大学 ...