修正锚点跳转位置 避免头部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 ...
随机推荐
- IdentityServer4【Reference】之Profile Service
Profile Service 当创建令牌或者请求像Userinfo这种端点时,IdentityServer通常会需要用户的标识信息(identity information),默认情况下,Ident ...
- php函数 array_diff
array_diff ( array $array1 , array $array2 [, array $... ] ) : array 对比 array1 和其他一个或者多个数组,返回在 array ...
- Linux--前后端分离部署
项目部署 (vue + nginx + uwsgi + django + mysql + redis) 一 . 前端部署 1. 下载vue代码,解压缩 wget https://files.cnblo ...
- EntityFramework Core笔记:入门(1)
1. 安装运行环境 EntityFramework Core运行环境,安装NuGget包: //Sql Server Database Provider PM> Install-Package ...
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
- koa-router 后台路由管理框架
koa-router是koa框架配套的路由管理模块,对后台的接口分离出来. 首先引入koa和koa-router, 然后分批设置路由: 代码中的institution.modifyInsStatus是 ...
- python发送smtp 邮件 图片
#-*- coding: utf-8 -*- # python2 import os import time import random import smtplib from time import ...
- [luogu3380][bzoj3196]【模板】二逼平衡树【树套树】
题目地址 [洛谷传送门] 题目大意 区间查询k的排名,查找k排名的数,单点修改,区间前驱,区间后继. 感想 真的第一次写树套树,整个人都不对了.重构代码2次,发现样例都过不了,splay直接爆炸,可能 ...
- shell 基础(二)变量
1. shell变量的定义 1)Shell 支持以下三种定义变量的方式: variable=value variable='value' variable="value" 特点 1 ...
- Vue(基础八)_导航守卫(组件内的守卫)
一.前言 主要通过一个例子演示三个钩子的作用: 1.beforeRouteEnter() ...