修正锚点跳转位置 避免头部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 ...
随机推荐
- Package与Activity简介
Package Package 包.只是在我们的app中这个Package是唯一的,就像你身份证号码一样.在我们做app自动化时,我们就需要知道他的Package,我们知道了Package那么也就知道 ...
- js DOM操作 容易犯的错误
这样一段html片段 <select class="form-control" id="course_chapter" onchange="fi ...
- python之面向对象初识
一.面向对象初识 1.结构上 面向对象分成两部分:属性.方法 class A: name = 'xiaoming' # 静态属性.静态变量.静态字段. def func1(self): # 函数.动态 ...
- 线程池、进程池(concurrent.futures模块)和协程
一.线程池 1.concurrent.futures模块 介绍 concurrent.futures模块提供了高度封装的异步调用接口 ThreadPoolExecutor:线程池,提供异步调用 Pro ...
- DRF之版本控制、认证和权限组件
一.版本控制组件 1.为什么要使用版本控制 首先我们开发项目是有多个版本的当我们项目越来越更新,版本就越来越多,我们不可能新的版本出了,以前旧的版本就不进行维护了像bootstrap有2.3.4版本的 ...
- vue2.0实现过滤
vue1.0和vue2.0差别还是挺多的,之前的vue1.0还有过滤器功能,到了2.0过滤器只能通过自己编写.以下是写的一个小demo: HTML <div id="app" ...
- 洛谷P2634 聪明可可
还是点分治 树上问题真有趣ovo,这道题统计模3为0的距离,可以把重心的子树分开统计,也可以一次性统计,然后容斥原理减掉重复的.. 其他的过程就是点分治的板子啦. #include <bits/ ...
- 【XSY3154】入门多项式 高斯消元
题目大意 给你一个 \(n\times n\)的矩阵 \(A\),求次数最小且最高次项为 \(1\) 的多项式 \(F(x)\),满足 \(F(A)=0\). 所有操作都对 \(p\) 取模. \(n ...
- 了解PID控制
@2019-03-07 [小记] 了解PID控制 比例 - 积分 - 微分 积分 --- 记忆过去 比例 --- 了解现在 微分 --- 预测未来
- SpringBoot2.0初识
核心特性 组件自动装配: Web MVC , Web Flux , JDBC 等 激活: @EnableAutoConfiguration 配置: /META_INF/spring.factories ...