一个简单的锚点的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位到具体位置</title> <style type="text/css"> /*CSS reset*/ body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} capation,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before, q:after{content:' '} abbr,acronym{border:0;} .positionDiv{width: 70%; margin: 0 auto; height: 400px; border: 1px solid #000;} #div1{background-color: red;} #div2{background-color: green;} #div3{background-color: blue;} #div4{background-color: yellow;} #div5{background-color: orange;} #content{width: 70%; margin-top: 20px; overflow: auto;} #menu{ position:fixed; border: 1px solid #000; width: 15%; top:20px; right: 50px;} #menu ul li{list-style: none; padding: 10px; text-align: center; border: 1px solid #000;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#div1">div1</a></li> <li><a href="#div2">div2</a></li> <li><a href="#div3">div3</a></li> <li><a href="#div4">div4</a></li> <li><a href="#div5">div5</a></li> </ul> </div> <div id="content"> <div id="div1" class="positionDiv"> <span>div1</span> </div> <div id="div2" class="positionDiv"> <span>div2</span> </div> <div id="div3" class="positionDiv"> <span>div3</span> </div> <div id="div4" class="positionDiv"> <span>div4</span> </div> <div id="div5" class="positionDiv"> <span>div5</span> </div> </div> </body> <script type="text/javascript"> </script> </html>