如下锚点标签:

<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固定部分遮挡的更多相关文章

  1. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  2. zepto的scrollTo,实现锚点跳转

    实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...

  3. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  4. jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  5. 微信小程序 scroll-view 实现锚点跳转

    在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...

  6. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  7. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  8. 使用JS模拟锚点跳转

    A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...

  9. jQuery实现锚点跳转(就一行代码)

    /* 锚点跳转 */ function anchor(p,fn) { $("html,body").animate({ scrollTop: $("#" + p ...

随机推荐

  1. BEX5下集成FullCalendar

    实现版本 BEX5 3.6 集成前准备: 直接网上查找FullCalendar获得插件文件 fullcalendar.min.css fullcalendar.min.js fullcalendar. ...

  2. GitHub修改用户名

    刚开始用github时随便起了个名字,现在想修改名字了,自己研究了半天终于找到修改地方 1.点击settings 2.点击Account的Change username 3.点击下面红色的按钮 4.在 ...

  3. 爬虫系列之mongodb

    mongo简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非 ...

  4. [十二省联考2019]字符串问题——后缀自动机+parent树优化建图+拓扑序DP+倍增

    题目链接: [十二省联考2019]字符串问题 首先考虑最暴力的做法就是对于每个$B$串存一下它是哪些$A$串的前缀,然后按每组支配关系连边,做一遍拓扑序DP即可. 但即使忽略判断前缀的时间,光是连边的 ...

  5. 2019/04/06 BJ省选模拟DAY1

    今天好惨啊 \(n*m\)的图手抖打成\(n*n\)的板子 挂了70分 否则并列rk20?[雾] hyc好厉害啊阿克 省队预订了啊 T1 众所周知向量a,b相乘形成一个矩陣 已知一个矩阵 问至少要多少 ...

  6. LOJ #2731. 「JOISC 2016 Day 1」棋盘游戏(dp)

    题意 JOI 君有一个棋盘,棋盘上有 \(N\) 行 \(3\) 列 的格子.JOI 君有若干棋子,并想用它们来玩一个游戏.初始状态棋盘上至少有一个棋子,也至少有一个空位. 游戏的目标是:在还没有放棋 ...

  7. 【洛谷P1516】青蛙的约会

    题目大意:给定 \(a,b,c\),求线性同余方程 \(ax+by=c\) 的最小正整数解. 题解:首先判断方程是否有解,若 c 不能整出 a 与 b 的最大公约数,则无解.若有解,则利用扩展欧几里得 ...

  8. js获取url参数(通用方法)

    function getUrl(name="") { var url = location.search; //获取url中"?"符后的字串 var theRe ...

  9. 微信小程序无法定位

    获取定位的时候报:errMsg:getLocation:fail:require permission desc 错 解决办法: 在app.js加入代码 //app.js新增如下代码 config = ...

  10. C++: sprintf浮点数精度控制;

    错误的写法: char buf[100]; int num = 10; sprintf(buf, "%.2f", num); ///这种做法是不对的, 按照压栈顺序, 在压入num ...