如下锚点标签:

<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. 通过FactoryBean配置Bean

    这是配置Bean的第三种方式,FactoryBean是Spring为我们提供的,我们先来看看源码: 第一个方法:public abstract T getObject() throws Excepti ...

  2. MyBatis基础:MyBatis缓存(5)

    1. MyBatis缓存简介 MyBatis提供支持一级缓存及二级缓存. 一级缓存: 2.MyBatis一级缓存

  3. PhotoShop不用魔棒、钢笔 建立较平整的选区 P进电脑屏幕里

    不用魔棒.抽出.钢笔等,还可以直接变形图建立调整选区,这种方法比钢笔抽出感觉简单一些,比魔棒仔细一些. 抽出或钢笔:抽出弄错了偏移了还要擦除,调整笔刷,抽出后可能还有毛边,需要用橡皮擦除: 钢笔,错了 ...

  4. js对内容进行编码(富文本编辑器使用居多)

    escape(string)函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 使用unescape(string) 对 escape() 编码的字符串进行解码.

  5. Windows服务器【由于系统缓冲区空间不足或队列已满,不能执行套接字上的操作】问题调查

    今天测试反应了一个问题,说接口返回的速度变慢了,并且返回的数据也不对.然后就找到了我o(╥﹏╥)o. 第一个反应就是查日志,不查不要紧,一查吓一跳,整个服务器上所有的站点都报错了.异常信息如下: Sy ...

  6. 一文读懂ES6(附PY3对比)

      Ⅰ.ES6~POP¶ 代码示例:https://github.com/lotapp/BaseCode/tree/master/javascript/1.ES6 在线演示:https://githu ...

  7. linux c编程之fcntl

    fcntl可实现对指定文件描述符的各种操作,其函数原型如下: int fcntl(int fd, int cmd, ... /* arg */ ); 其中,操作类型由cmd决定.cmd可取如下值: F ...

  8. python 第一课 helloworld

    #!/usr/bin/env python #-*-coding:utf-8-*- #以上是配置编写环境的开始 #第一行env表示运行当前环境变量内的python版本(2.x or 3.x) #第二行 ...

  9. mysql加速导入数据的简单设置

    mysql加速导入数据的简单设置 # 修改前查询参数值 show variables like 'foreign_key_checks'; show variables like 'unique_ch ...

  10. day18 集合框架(JCF)

    集合框架(JCF)java collections framework 框架:为了实现某一目的/功能而预先提供的一系列封装好的具有继承或实现关系的类与接口. 1.这种框架是高性能的,对基本类集(动态数 ...