html锚点定位向下偏移,CSS锚点定位偏移问题的解决

＼前端博客

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;

}

#p1

#p2

#p3

#p4

#p5

p1

p2

p3

p4

p5

window.οnlοad=function(){

var oBtn=document.querySelector("#btn");

var aA=oBtn.querySelectorAll("a");

for(var i=0;i

aA[i].οnclick=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();

}

}

}