锚标记定位问题

lasssadd 2010-11-28 12:14:04

如下代码:点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>

...全文

315 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

lasssadd 2010-11-28

打赏
举报

[Quote=引用 3 楼 hch126163 的回复:]
<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=……
[/Quote]
而且还是显示在页面的最顶端...

lasssadd 2010-11-28

打赏
举报

hch126163 2010-11-28

打赏
举报

hch126163 2010-11-28

打赏
举报

不能用相对定位

hch126163 2010-11-28

打赏
举报

lasssadd 2010-11-28

打赏
举报

[Quote=引用 11 楼 hch126163 的回复:]
a3.a4.a5.a6.a7 后那个DIV块都出现在页面最顶端

抱歉，之前没仔细看你的要求！

你的要求要用 js 来实现！

我实现的href="#ID"

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1……
[/Quote]
很好很强大！！

hch126163 2010-11-28

打赏
举报

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>

lasssadd 2010-11-28

打赏
举报

[Quote=引用 8 楼 kkbac 的回复:]
引用 7 楼 lasssadd 的回复:
这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

那就不要用描点了.
直接用jquery.
1. 判断div的位置,
2. 得出div居中的时候滚动条的位置,
3. 把滚动条滚动到指定的位置.
[/Quote]
能帮我写jquery的代码吗？我对jquery完全一无所知

lasssadd 2010-11-28

打赏
举报

[Quote=引用 8 楼 kkbac 的回复:]
引用 7 楼 lasssadd 的回复:
这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

那就不要用描点了.
直接用jquery.
1. 判断div的位置,
2. 得出div居中的时候滚动条的位置,
3. 把滚动条滚动到指定的位置.
[/Quote]
杯具别无它法吗？

kkbac 2010-11-28

打赏
举报

[Quote=引用 7 楼 lasssadd 的回复:]
这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？
[/Quote]

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

lasssadd 2010-11-28

打赏
举报

[Quote=引用 6 楼 kkbac 的回复:]
描点默认是跳到顶端的.

如果你不想你显示的div调转到顶端. 可以不要再div哪里加描点.

在div上面一点地方加描点.

如.
<a href="#a2">a2</a>

<div style="height: 100px;"><a id="a2"></a></div>

<div name="a2" class="a2">a2</div>
[/Quote]
这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

kkbac 2010-11-28

打赏
举报

描点默认是跳到顶端的.

如果你不想你显示的div调转到顶端. 可以不要再div哪里加描点.

在div上面一点地方加描点.

如.
<a href="#a2">a2</a>

<div style="height: 100px;"><a id="a2"></a></div>

<div name="a2" class="a2">a2</div>