问题描述
当顶部固定时,点击锚点,会跳转到锚点以下。
<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元素放在页面最上方,除非已经到达底部了。