<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>锚点定位</title>
<style type="text/css">
#thediv,#thediv2,#thediv3,#thediv4 {width:100%;height:50px;background:#CCC;margin-top:100px;}
.position{float: left;position: fixed;top: 10px;}
.position ul{list-style: none;}
.position ul li {float: left;padding: 10px;}
.position ul li a {text-decoration: none;background: #abcdef;}
</style>
</head>
<body style="height:1000px;">
<div class="position">
<ul>
<li><a href="#thediv">峰峰</a></li>
<li><a href="#thediv2">小吃货</a></li>
<li><a href="#thediv3">球球</a></li>
<li><a href="#thediv4">喋喋</a></li>
</ul>
</div>
<div id="thediv">峰峰</div>
<div id="thediv2">小吃货</div>
<div id="thediv3">球球</div>
<div id="thediv4">喋喋</div>
</body>
</html>
原文：http://www.cnblogs.com/-zhuli/p/4682372.html