锚标记定位问题

如下代码:点a3.a4.a5.a6.a7 后那个DIV块都出现在页面最顶端 看起来很不友好.... 有办法显示在屏幕的中间吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
text-align: center;
}
.a1{
height: 2800px;
width: 984px;
border: thin solid #0033FF;
position: relative;
}
.a2{
height: 20px;
width: 50px;
border: thin solid #FF0000;
position: absolute;
top: 300px;
}
.a3{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 600px;
}
.a4{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 900px;
}
.a5{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 1200px;
}
.a6{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 1500px;
}
.a7{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 1800px;
}
.a8{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 2100px;
}
.a9{
height: 20px;
border: thin solid #FF0000;
width: 50px;
position: relative;
top: 2400px;
}
.dingwei{
height: 20px;
border: thin solid #FF0000;
width: 400px;
position: relative;
top: 1px;
float: left;
}
</style><body>
<div class="a1">
 <div class="dingwei"><a href="#a2">a2</a> <a href="#a3">a3</a> <a href="#a4">a4</a> <a href="#a5">a5</a> <a href="#a6">64</a> <a href="#a7">a7</a> <a href="#a8">a8</a> <a href="#a9">a9</a></div>
 <div class="a2"><a name="a2" id="a2"></a>a2</div>
 <div class="a3"><a name="a3" id="a3"></a>a3</div>
 <div class="a4"><a name="a4" id="a4"></a>a4</div>
 <div class="a5"><a name="a5" id="a5"></a>a5</div>
 <div class="a6"><a name="a6" id="a6"></a>a6</div>
 <div class="a7"><a name="a7" id="a7"></a>a7</div>
 <div class="a8"><a name="a8" id="a8"></a>a8</div>
 <div class="a9"><a name="a9" id="a9"></a>a9</div>
 </div>
</body>
</html>

解决方案 »

  1.   

    <div class="a1">
     <div class="dingwei"><a href="#a2">a2</a> <a href="#a3">a3</a> <a href="#a4">a4</a> <a href="#a5">a5</a> <a href="#a6">64</a> <a href="#a7">a7</a> <a href="#a8">a8</a> <a href="#a9">a9</a></div>
     <div name="a2" class="a2"><a id="a2"></a>a2</div>
     <div name="a3" class="a3"><a  id="a3"></a>a3</div>
     <div name="a4" class="a4"><a  id="a4"></a>a4</div>
     <div name="a5" class="a5"><a  id="a5"></a>a5</div>
     <div name="a6" class="a6"><a  id="a6"></a>a6</div>
     <div  name="a7" class="a7"><a id="a7"></a>a7</div>
     <div name="a8" class="a8"><a  id="a8"></a>a8</div>
     <div  name="a9" class="a9"><a id="a9"></a>a9</div>
     </div>
    </body>
      

  2.   

    <style type="text/css">
    body{width:100%;height:100%}
    div{height:500px; border:1px solid #ddd;
    }
    </style>
    <div class="a1">
     <div class="dingwei"><a href="#a2">a2</a> <a href="#a3">a3</a> <a href="#a4">a4</a> <a href="#a5">a5</a> <a href="#a6">64</a> <a href="#a7">a7</a> <a href="#a8">a8</a> <a href="#a9">a9</a></div>
     <div name="a2" class="a2"><a id="a2"></a>a2</div>
     <div name="a3" class="a3"><a id="a3"></a>a3</div>
     <div name="a4" class="a4"><a id="a4"></a>a4</div>
     <div name="a5" class="a5"><a id="a5"></a>a5</div>
     <div name="a6" class="a6"><a id="a6"></a>a6</div>
     <div name="a7" class="a7"><a id="a7"></a>a7</div>
     <div name="a8" class="a8"><a id="a8"></a>a8</div>
     <div name="a9" class="a9"><a id="a9"></a>a9</div>
     </div>
      

  3.   

    描点默认是跳到顶端的.如果你不想你显示的div调转到顶端. 可以不要再div哪里加描点.在div上面一点地方加描点.如.
    <a href="#a2">a2</a><div style="height: 100px;"><a id="a2"></a></div><div name="a2" class="a2">a2</div>
      

  4.   


    那就不要用描点了. 
    直接用jquery. 
    1. 判断div的位置, 
    2. 得出div居中的时候滚动条的位置,
    3. 把滚动条滚动到指定的位置.
      

  5.   

    能帮我写jquery的代码吗？我对jquery完全一无所知
      

  6.   

    a3.a4.a5.a6.a7 后那个DIV块都出现在页面最顶端 
    抱歉，之前没仔细看你的要求！你的要求要用 js 来实现！
    我实现的href="#ID"
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    body{
        text-align: center;
    }
    .a1{
        height: 2800px;
        width: 984px;
        border: thin solid #0033FF;
        position: relative;
    }
    .a2{
        height: 20px;
        width: 50px;
        border: thin solid #FF0000;
        position: absolute;
        top: 300px;
    }
    .a3{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 600px;
    }
    .a4{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 900px;
    }
    .a5{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 1200px;
    }
    .a6{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 1500px;
    }
    .a7{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 1800px;
    }
    .a8{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 2100px;
    }
    .a9{
        height: 20px;
        border: thin solid #FF0000;
        width: 50px;
        position: relative;
        top: 2400px;
    }
    .dingwei{
        height: 20px;
        border: thin solid #FF0000;
        width: 400px;
        position: relative;
        top: 1px;
        float: left;
    }
    </style><body>
    <div class="a1">
     <div class="dingwei"><a href="#a2">a2</a> <a href="#a3">a3</a> 
     <a href="#a4">a4</a> <a href="#a5">a5</a> <a href="#a6">64</a>
      <a href="#a7">a7</a> <a href="#a8">a8</a> <a href="#a9">a9</a></div>
     <div class="a2"><a   id="a2"></a>a2</div>
     <div class="a3"><a   id="a3"></a>a3</div>
     <div class="a4"><a   id="a4"></a>a4</div>
     <div class="a5"><a   id="a5"></a>a5</div>
     <div class="a6"><a   id="a6"></a>a6</div>
     <div class="a7"><a   id="a7"></a>a7</div>
     <div class="a8"><a   id="a8"></a>a8</div>
     <div class="a9"><a   id="a9" ></a>a9</div>
     </div>
    </body>
    <script type="text/javascript">        function initAnchor()
            {
                var links = document.getElementsByTagName("a");
                var href ;
            for (i = 0; i < links.length; i++) 
            {
                href = links[i].getAttribute("href");
               var AnchorName;
               var index=0;
               var target;
            if (href && href !="")
             {
             index= href.indexOf("#");
             if(index>-1){
                     AnchorName = href.substr(index+1);
            if (target=document.getElementById(AnchorName)) 
            {
            (function(i,e){   
                 links[i].onclick =  function()
                 {
                 var top = getAbsPoint(e).y - getClientHeight()/2 ;
                 document.documentElement.scrollTop  = top;
                      //document.body.scrollTop  =  
                     
                      return false;
                  };
          })(i,target);
           
            }
            
            }
            }
            }
            }
      
        /********************
     * 取窗口可视范围的高度 
     *******************/
     function  getClientHeight()
    {
         return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;         
    };
    function getAbsPoint(e)
    {
        var x = e.offsetLeft;
        var y = e.offsetTop;
        while(e = e.offsetParent)
        {
            x += e.offsetLeft;
            y += e.offsetTop;
        }
        return {"x": x, "y": y};
    }
    window.onload=initAnchor;
    </script>
    </html>