제어점의 여러 상황을 요약하겠습니다.
1. 같은 페이지 표면에서
<a name = add> </a> <!-앵커 포인트 정의-> <a href =#add> 추가로 점프 </a>
2. 다른 페이지에서 앵커 포인트는 A.HTML에 위치하고 다른 페이지의 링크 에서이 앵커 포인트로 점프 점프가 있습니다.
<a href = a.html#add> a.add로 점프 </a>
3. 링크를 클릭하여 JS 이벤트를 트리거하고 동시에 앵커 포인트로 점프하십시오.
첫 번째 유형 :
<a href =#add onclight = add ()> 추가 함수 트리거링 및 앵커 추가 점으로 점프 </a>
두 번째 유형 :
<div id = divnode> <!-컨텐츠-> </div> <!-점프 해야하는 노드를 가정합니다 false;> scrolliintoview를 통해 앵커 포인트 효과를 실현하십시오 </a>
HTML에서 앵커 위치 위치를 설정하고 JS 포지셔닝을 사용하는 방법이 가장 완전합니다
1. ID 포지셔닝 사용 :
<a href =#1f name = 1f> 앵커 포인트 1 </a> <div name = 1f> <p> 11111111111 </br> 111111111111 </br> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111까지까지 > </p> </div>
이러한 위치는 모든 레이블에 대해 위치 할 수 있습니다.
2. 이름 포지셔닝 사용 :
<a href =#5f> 앵커 포인트 5 </a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> "
이름 속성을 사용하면 A 태그에 대해서만 위치 할 수 있으며 DIV와 같은 다른 태그를 배치 할 수 없습니다.
3. JS 포지셔닝을 사용하십시오
<li class = onclick = javaScript : document.getElementById ( 'here')> </li> </li>
예:
JS 앵커 포인트 부드러운 포지셔닝
<DocType HTML Public- // dtd html 4.01 // el type/css mce_bogus {너비 : 400px; {font-size : 1px 고체; } div.test p {높이 : 400px; #f1f1f1; ) 0 : v;}? HEAD); var wb; var hb; + (e.CurrenStyle.bordrtopwidth) : 0); e.currensttyle.bordrtopwidth) : 0); var, w, h; if (document.documentedElement &&& documentElement.scrolltop t.documentElement. scrolltop; l = document.documentedlement.scrollleft; w = document.documentElement.scrollwidth; else (document.body) {t = document.body. scrolltop; l = document.body.scrollwidth; {EL! = 'Object') {el = var z = Z.EL; getScroll (); ) {var t = (새 날짜). {z.scroll (zpy, zpx)}, 13) {st = (-math.cos (p * math.pi) / 2) * (zpy -zst) + zst; (-math.cos (p * math.pi) / 2) + 0.5) * (zpx -zsl) + zsl; z.scroll = fuins (t, l). Window .scrollto (l, t)}; z.timer = Window.setInterval (function () {z.step ();}, 13); > <이름 = header_1 id = header_1> </a> <strong onclick = javaScript : 스크롤러 ( 'header_4', 800);> header_1-> header_4 </p> </p> </div> </div> div class = test> <a name = header_2 id = header_2> </a> <strong onclick = javaScript : 스크롤러 ( 'header_5', 800);> header_2-> header_5 </strong >> </p > </div> <div class = test> <a name = header_3 id = header_3> </a> <strong onclick = javaScript : 스크롤러 ( 'header_6', 800); class = test> <a name = header_4 id = header_4> </a> <strong onclick = javaScript : 스크롤러 ( 'header_7', 800);> header_4-> 헤더 _7 <</strong> <p> </p> </div> <div class = test> <a name = header_5 id = header_5> </a> <strong knowledge = javaScript ( 'header_3', 800); /p> </div> <div class = test> <a name = header_6 id = header_6> </a> <strong onclick = javaScript : 스크롤러 ( 'header_2', 800);> header_6-> header_2 </strong > <p> </p> </div> <div class = test> <a name = header_7 id = header_7> </a> <strong onclick = javaScript : 스크롤러 ( 'header_1', 800);> header_7-> header_1 </strong> <p> </p> </body> </html>위는이 기사의 모든 내용입니다.