修正锚点跳转位置 避免头部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 ...
随机推荐
- 异常SRVE0199E
后台生成导出exe表格,在tomcat自己环境下完全没问题到websphere环境下保SRVE0199E产生这个问题是因为response.OutputStream已经打开再次打开就报这个异常,前台如 ...
- 一个".java"源文件中是否可以包括多个类
可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 现在我们编个测试文件来测试一番(一个程序员要具有用于探索的精神 -.- 手动滑稽) 1.编写一个 a ...
- linux 安装所有软件可以使用这个网站搜索RPM包
#很方便很实用 强烈推荐 https://pkgs.org/
- 【nowcoder-2017校招真题】保留最大的数
牛客在线编程-保留最大的数 题目描述 给定一个十进制的正整数number,选择从里面去掉一部分数字,希望保留下来的数字组成的正整数最大. 输入描述: 输入为两行内容,第一行是正整数number,1 ≤ ...
- 树&堆
树 什么是树? 大概像下面这样: 树的概念 树的每个点被称为节点: 连接的两个点,一个为父节点,一个为子节点,例如上图中,\(1\)是\(4\)的父节点,\(4\)是\(1\)的子节点: 没有父节点的 ...
- pymongo 使用方法(增删改查)
#!/usr/bin/env python # -*- coding:utf-8 -*- """ MongoDB存储 在这里我们来看一下Python3下MongoDB的存 ...
- 存在多个 AJAX 任务
实现的效果: 这两个Ajax任务可同时实现,也可单独实现. 标准的函数: var xmlhttp; function loadXMLDoc(url,ufunc){ if(window.XMLHttpR ...
- Python通过分页对数据进行展示
# 通过分页对数据进行展示 """ 要求: 每页显示10条数据 让用户输入要查看的页面:页码 """ USER_LIST = [] for ...
- [译]Ocelot - Delegating Handlers
原文 可以为HttpClient添加delegating handlers. Usage 为了添加delegating handler需要做两件事. 首先如下一样创建一个类. public class ...
- [译]Ocelot - Request Id / Correlation Id
原文 Ocelot可以通过header的形式发送一个requestid.ocelot会将这个requestid转发到下游服务. 如果在日志配置中设置了IncludeScopes为true,那么requ ...