html锚点定位向下偏移,html锚点定位不准确问题

#问题描述当顶部固定时，点击锚点，会跳转到锚点以下。

#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;

}

this is top

one

two

three

one

two

three

问题原因

点击超链接之后，跳到的锚点位置向下的偏移量就是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，这种方法可以实现将锚点元素绑定到任意元素上

one

(2)name定位，只能针对a标签来定位，对其他标签不能起到定位作用。

one

......

one

(3)万能的js定位，获取元素位置使用document.querySelector(sel)获取元素使用element.offsetTop,element.offsetLeft获取元素位置使用scrollTo(也可以用scrollBy)函数滚动到指定位置

滚动条的行为：默认把hash元素放在页面最上方，除非已经到达底部了。

html锚点定位向下偏移,html锚点定位不准确问题相关推荐

html锚点定位向下偏移,锚点偏移
参照用,事少来最差端在事路原们这制码效移,动stackoverflow 的做法,在主体内容前加一个朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏暗锚: 主体内容... 将锚点进行 ...
锚点定位——如何设置锚点居页面顶部距离，锚点定位并距离顶部一定偏移
锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部.然后可以创建 ...
深入理解CSS定位中的偏移
前面的话 CSS有三种基本的布局机制:普通流.浮动和绝对定位.利用定位,可以准确地定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素甚至浏览器窗口本身的位置.但元素究竟如何定位,定 ...
pandas使用shift函数对数数据进行向上偏移（-1）或者向下偏移（1）、索引不移动，移动之后无值的赋值为NaN、将原数据列与偏移后的数据列相加生成新的数据列
pandas使用shift函数对数数据进行向上偏移(-1)或者向下偏移(1).索引不移动,移动之后无值的赋值为NaN.将原数据列与偏移后的数据列相加生成新的数据列目录
【position也可以很复杂】当弹出层遇上了鼠标定位（下）
前言接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试引出问题有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
ios UITableView顶部向下偏移
//设置向下偏移20[self.tableView setContentInset:UIEdgeInsetsMake(20,0,0,0)]; 转载于:https://www.cnblogs.com/s ...
Python selenium定位动态下拉框
Python selenium定位动态下拉框 1.下拉框元素需要点击控件才展示这里可以使用XPAN定位到下拉框,使用driver.find_element(By.XPATH,"路径&quo ...
高德定位SDK踩坑-高精度模式下获取不到GPS定位（无网络环境）
高德定位SDK踩坑-高精度模式下获取不到GPS定位(无网络环境) 关键字:定位模式高精度模式 GPS定位无网络一句话描述问题:高精度模式在断网环境下不可靠.有几率重复报错或使用缓存定位,不使用G ...
iframe定位、下拉框定位、获取cookie
iframe 就是一个页面里嵌套了另外一个页面 iframe标签也叫浮动框架标签,iframe标签也是一个比较特殊的框架,可以放在浏览器中的小窗口,可以出现在页面的任何一个位置上,但是整个页面并一定在 ...

html锚点定位向下偏移,html锚点定位不准确问题

html锚点定位向下偏移,html锚点定位不准确问题相关推荐

最新文章

热门文章