1、直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#a1{
width: 100%;
height: 800px;
background: #00FFFF;
}
#a2{
width: 100%;
height: 800px;
background: #D1C6CB;
}
#a3{
width: 100%;
height: 800px;
background: #A94442;
}
.links{
position: fixed;
top: 50%;
left: 50%;
color: gold;
z-index: 200;
width: 200px;
height: 200px;
}
[name='a4']{
width: 100%;
height: 800px;
background: cadetblue;
}
</style>
</head>
<body>
<div class="links">
<ul>
<li><a href="#a1">jump to a1</a></li>
<li><a href="#a2">jump to a2</a></li>
<li><a href="#a3">jump to a3</a></li>
<li><a href="#a4">跳转到底部</a></li>
</ul>
</div>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<a name='a4'>跳转到底部</a>
</body>
</html>
2.效果各位自己看