下面来给大家介绍在制作网页时发现象锚点定位偏移问题的解决办法，我们只要利用padding-top和maring-top就可以解决了，具体方法如下。
解决偏移问题用两个属性——padding-top和maring-top
padding-top用于解决锚点区域与顶部的偏移量
margin-top用于解决锚点区域与锚点区域之间因设置的padding-top而产生的不必要偏移量
padding-top用正值，maring-top用负值，二者数值一样
例子
代码如下
复制代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>＼前端博客</title>
<style>
body {
padding-top:100px;
}
*{
margin:0;
padding:0;
}
#p1 {
background: yellow;
height: 300px;
}
#p2 {height: 800px;background:blue;}
#p3 {height: 800px;background:green;}
#p4 {height: 800px;background:red;}
#p4 {height: 800px;background:#ccc;}
#p5 {height: 800px;background:#aaa;}
div[id*=p] {
font-size: 100px;
}
#btn{
position: fixed;
left:0;top:0;
height:100px;
line-height: 100px;
background: #f15f43;
width:100%;
text-align: center;
padding:10px 0;
}
#btn a {
background: #323841;
height: 100px;
padding:0 40px;
font-size: 14px;
color:#fff;
display: inline-block;
}
</style>
</head>
<body>
<div id="btn">
<a id="a1" href="#p1">#p1</a>
<a id="a1" href="#p2">#p2</a>
<a id="a1" href="#p3">#p3</a>
<a id="a1" href="#p4">#p4</a>
<a id="a1" href="#p5">#p5</a>
</div>
<div id="p1">
p1
</div>
<div id="p2">
p2
</div>
<div id="p3">
p3
</div>
<div id="p4">
p4
</div>
<div id="p5">
p5
</div>
</body>
</html>
<script>
window.onload=function(){
var oBtn=document.querySelector("#btn");
var aA=oBtn.querySelectorAll("a");
for(var i=0;i<aA.length;i++) {
aA[i].onclick=function(ev){
var ev= ev || window.event;
var id=this.hash;
var thisId=document.querySelector(id);
document.documentElement.scrollTop=document.body.scrollTop = thisId.offsetTop-oBtn.offsetHeight;
ev.preventDefault();
}
}
}
</script>
