html锚点定位不准确问题
问题描述
当顶部固定时,点击锚点,会跳转到锚点以下。
<style>#one,#two,#three{height: 500px;}#top{position: fixed;height: 100px;width:100%;top:0;left:0;z-index: 100;background: black;}#main{padding-top: 100px;}
</style><div id="top">this is top</div>
<div id="main"><a href="#one">one</a><a href="#two">two</a><a href="#three">three</a><div name="one" id="one">one</div><div name="two" id="two">two</div><div name="three" id="three">three</div>
</div>
问题原因
点击超链接之后,跳到的锚点位置向下的偏移量就是fixed的头部的高度。
问题解决
1、设置所有锚点处的样式
css padding-top:100px; margin-top:-100px;
2、使用:target伪类
target指当前路径hash指定的元素的样式
css :target{ padding-top:44px; }
3、使用暗锚
不太懂
4、使用jquery
指定每个链接点击之后的事件,使用js的scrollTo和scrollBy两个函数实现跳转,这种方法最为灵活,且能够以动画的形式跳转。
锚点定位的三种方法
(1)id定位 ,指定锚点的id,这种方法可以实现将锚点元素绑定到任意元素上
<a href="#one">one</a>
<div id="one">one</div>
(2)name定位 , 只能针对a标签来定位,对其他标签不能起到定位作用。
plain <a href="#one">one</a> ...... <div><a name='one'></a>one</div>
(3)万能的js定位,获取元素位置
使用document.querySelector(sel)获取元素
使用element.offsetTop,element.offsetLeft获取元素位置
使用scrollTo(也可以用scrollBy)函数滚动到指定位置
滚动条的行为:默认把hash元素放在页面最上方,除非已经到达底部了。
html锚点定位不准确问题相关推荐
- css锚点定位不准确问题
现象:当顶部导航栏固定时,点击锚点,会跳转到锚点以下. #top{position: fixed;height: 100px;top:0;left:0;z-index: 100;} 问题原因 点击超链 ...
- html锚点定位向下偏移,html锚点定位不准确问题
#问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. #one,#two,#three{ height: 500px; } #top{ position: fixed; height: 100px; ...
- html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
- js锚点定位_overflow属性详解,利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
- uniapp锚点定位
uniapp 锚点定位 需求:在 uniapp 写 App 时,根据后端接口返回的数据渲染图文,并且要对图片进行锚点定位. 前提:后端要给每张图片一个单独的参数,用来区分每张图片. 思路:前端将这个特 ...
- html锚点定位向下偏移,锚点偏移
参照 用,事少来最差端在事路原们这制码效移,动stackoverflow 的做法,在主体内容前加一个朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏暗锚: 主体内容... 将锚点进行 ...
- 微信小程序-锚点定位+内容滑动控制导航选中
之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中,这里我们就结合起来,实现这两个功能! 思路不再多说,直接上干货! WXML <view class="navigateBox&qu ...
- html 标签、图像、链接、注释、锚点定位、特殊字符
常用的 html 标签 <!-- 1.成对出现的标签:--><h1>h1标题</h1> <div>这是一个div标签</div> <p ...
- 如何用html语言定位img,html经常使用标签(图像标签img,连接标签a,锚点定位,及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...
最新文章
- 女博士生爱上中专男,父亲直言自己只能打50分,你怎么看恋人学历差距大?...
- Excel对重复数据分组,求出不同的数据(office 2013)
- searcherinder.exe
- python自动化办公兼职-python如何实现自动化办公?
- asp.net的资料
- 【WebRTC---入门篇】(四)WebRTC设备管理
- 误删/var/lib/dpkg/info,文件解决方案(是否完全解决,不确定)
- 在c语言中定义共用型数据类型的关键字是,C语言的关键字共有32个,根据关键字的作用,可分其为数据类型关键...
- Linux内核开发者大会 开始报名啦~
- numpy矢量化运算
- 总结了几款好用的思维导图软件
- Firefox主页被360篡改该怎么办
- QScrollArea样式设置
- 用Asp.net 就能轻松实现铁道部的订票系统
- RSA详解 ----- Android中常用的非对称加密算法
- java判断图片地址链接是否有效
- 京东大数据平台进化之路
- SpringMVC-转换器与格式化
- 切切切词!新词发现算法TopWORDS的原理及实现|实在智能AI+RPA学院
- 对发了offer,而没有来入职的应聘者,现在再次来应聘,如果你是面试官,你会录用吗?...