锚标记定位问题

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

12 个解决方案

#1

#2

不能用相对定位

#3

#4

引用 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=……

有办法兼容吗？

#5

引用 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=……

而且还是显示在页面的最顶端...

#6

描点默认是跳到顶端的.

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

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

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

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

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

#7

引用 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>

这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

#8

引用 7 楼 lasssadd 的回复:

这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

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

#9

引用 8 楼 kkbac 的回复:

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

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

杯具别无它法吗？

#10

引用 8 楼 kkbac 的回复:

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

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

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

#11

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>

#12

引用 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……

很好很强大！！

#1

#2

不能用相对定位

#3

#4

引用 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=……

有办法兼容吗？

#5

引用 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=……

而且还是显示在页面的最顶端...

#6

#7

引用 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>

这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

#8

引用 7 楼 lasssadd 的回复:

这个方法是可以解决但是太过麻烦难道没有直接垂直居中显示的办法吗？

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

#9

引用 8 楼 kkbac 的回复:

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

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

杯具别无它法吗？

#10

引用 8 楼 kkbac 的回复:

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

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

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

#11

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>

#12

引用 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……

很好很强大！！

秒客网

锚标记定位问题

12 个解决方案

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

#1

#2

#3

#4

#5

#6

#7

#8

#9

#10

#11

#12

相关文章