利用A标签进行锚定位

 

方法一： 利用：javascript:document.getElementById(定位标签ID).scrollIntoView()

 1 <html>
 2     <body>
 3 
 4         @{
 5 
 6             
 7             <div style="margin:0 auto;height:auto;width:auto;border:1px solid green;">
 8             @for (int a = 0; a <1000;a++ )
 9             { 
10                 string idc="id"+a;
11                      //#id541
12             <a onclick="javascript:document.getElementById('@idc').scrollIntoView()" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</a>
13             
14             }
15             </div>
16             }
17             
18             <div style="margin:0 auto;height:auto;width:70px;border:1px solid green;">
19             @for (int a = 0; a <1000;a++ )
20             { 
21                 string id="id"+a;
22                      //id541
23             <div id="@id" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</div>
24             
25             }
26             </div>
27             }
28     </body>
29 </html>

 

 

方法二：原理：利用A标签 href="#{定位标签的ID}"

 <a href="#abc" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</a>

<div id="abc" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</div>

当点击时A标签时就会定位到ID为ABC的标签位置
 1 <html>
 2     <body>
 3 
 4         @{
 5 
 6             
 7             <div style="margin:0 auto;height:auto;width:auto;border:1px solid green;">
 8             @for (int a = 0; a <1000;a++ )
 9             { 
10                 string idc="#id"+a;
11                      //#id541
12             <a href="@idc" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</a>
13             
14             }
15             </div>
16             }
17             
18             <div style="margin:0 auto;height:auto;width:70px;border:1px solid green;">
19             @for (int a = 0; a <1000;a++ )
20             { 
21                 string id="id"+a;
22                      //id541
23             <div id="@id" style="border:1px solid red;width:50px;height:20px;margin:2px 5px">@a</div>
24             
25             }
26             </div>
27             }
28     </body>
29 </html>

posted on 2015-10-22 10:43  高达  阅读(242)  评论(0)    收藏  举报

导航