|
<!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>
|
