修正锚点跳转位置 避免头部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 ...
随机推荐
- [模板] 多项式: 乘法/求逆/分治fft/微积分/ln/exp/幂
多项式 代码 const int nsz=(int)4e5+50; const ll nmod=998244353,g=3,ginv=332748118ll; //basic math ll qp(l ...
- BM算法学习笔记
一种nb算法,可以求出数列的递推式. 具体过程是这样的. 我们先假设它有一个递推式,然后按位去算他的值. ;j<now.size();++j)(delta[i]+=1ll*now[j]*f[i- ...
- gcc __thread关键字
https://blog.csdn.net/xj178926426/article/details/54345449 EventLoop.cpp __thread EventLoop* t_loopI ...
- HTML-Note
<meta>在 HTML 5 中,有一个新的 charset 属性,它使字符集的定义更加容易. charset character encoding 定义文档的字符编码. e.g. < ...
- 主机管理+堡垒机系统开发:strace命令用法详解(六)
一.简单介绍 strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进 ...
- JENKINS针对不同项目组对用户进行权限分配
权限需求 因JENKINS上存有de(开发).te(测试).re(预发布)等三个不同环境的项目,同时因为项目需求,需要对不同的开发及测试人员配置不同的jenkins权限,即以项目为单位,对不同人员进行 ...
- Java设计模式之原型设计模式
概述 设计模式(Design Pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结. 使用设计模式的目的:为了代码可重用性.让代码更容易被他人理解.保证代码可靠性. 设计模式 ...
- 【转载】VS中生成、清理项目、调试、开始执行(不调试)、Debug 和 Release等之间的区别
https://blog.csdn.net/u012441545/article/details/51404412
- Geometric regularity criterion for NSE: the cross product of velocity and vorticity 1: $u\times \om$
在 [Chae, Dongho. On the regularity conditions of suitable weak solutions of the 3D Navier-Stokes equ ...
- [再寄小读者之数学篇](2014-06-23 Bernstein's inequality)
$$\bex \supp \hat u\subset \sed{2^{j-2}\leq |\xi|\leq 2^j} \ra \cfrac{1}{C}2^{jk}\sen{f}_{L^p} \leq ...