Let me summarize several situations of the control point:
1. On the same page surface
<A name = add> </a> <!-Define the anchor point-> <A href =#add> jump to add </a>
2. In different pages, the anchor point is positioned in A.HTML, and the jump jump from the link of another page to this anchor point
<A href = a.html#add> jump to A.add </a>
3. Click on the link to trigger the JS event and jump to the anchor point at the same time. There are two ways to deal with:
The first type:
<A href =#add onclight = add ()> Triggering the ADD function and jump to the add anchor point </a>
The second type:
<div ID = DIVNODE> <!-Contents-> </Div> <!-Assuming a node that needs to be jumped-> <a href =# onclick = document.GetelemetnByid ('DivNode'). (True); Return false;> Realize the anchor point effect through scrollIintoview </a>There are several methods to set anchor position positioning in HTML. Use ID positioning, use name positioning, and use JS positioning. These methods are not necessarily the most complete. You can only refer to it
1. Use ID positioning:
<A HREF =#1F NAME = 1F> Anchor Point 1 </a> <DIV Name = 1F> <p> 11111111111 </br> 111111111111 </br> 1111111111 </br> 111111111111 </br> 111111111111 </br > </p> </div>
Such a positioning can be located for any label.
2. Use name positioning:
<A href =#5F> anchor point 5 </a> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> </br> "
Using the name attribute can only be located for the A tag, and other tags such as DIV cannot be positioned.
3. Use JS positioning
<li class = Onclick = javascript: document.Getelementbyid ('Here'). Scrollintoview ()> </li> </li> </li>Example:
JS anchor point smooth positioning
<! Doctype HTML PUBLIC- // W3C // DTD HTML 4.01 // EN> <style Type = Text/CSS MCE_BOGUS = 1> Div.Test {width: 400px; 5px auto; 1px solid # ccc;} div.Test Strong {font-size: 16px; background: #fff; Border-Bottom: 1px solid #aaa; MARGIN: 0; Display: BLOCK; Padding: 5px 0; TEXT-DEC coion: Underline; Color: # 059b9a; Cursor: Pointer;} Div.test P {Height: 400px; Background: #F1F1F1; Margin: 0;} </style> <Script type = Text/JavaScript> Function Intv al (v) {v = PARSEINT (v) ; Return isnan (v)? 0: v;} //? Take elemental information function getpos (e) {var l = 0; var t = 0; var w = intVal (e.style.width); var h = intval (E.style.head); VAR WB = E.OffsetWidth; VAR HB = E.offsetheight; While (E.FFSetParent) {l + = e.offSetLeft + (E.CURRENTSTYLE? ntstyle.borderleftwidth): 0); T + = E.OffSettop + (E.CurrenTSTYLE? Intval (e.currenStyle.bordrtopwidth): 0); e = e.offsetparent; ntval (e. CurrentStyle.Borderleftwidth): 0); T + = E.offsettop + (E.CurrenTSTYLE? Intval (e.currenSttyle.bordrtopwidth): 0); Return {x: L, Y: T, W: H, H: H,, wb: wb, hb: hb: hb};} // ?? Function getScroll () {var, w, h; if (document.documentedElement &&&DOCumentelement.Scrolltop T.Documentelement . Scrolltop; l = Document.documentedLement.scrollLeft; w = Document.documentelement.scrollwidth; else if (document.body) {t = document.body.scrolltop; l = document.body. scrollLeft; w = document.body.scrollwidth; h = document.body.scrollheight;} Return {T: T, L: L, W: H};} //? Function Scroller (El, Duration) {if (typeof el! = 'Object') {el = document.GetelementByid (EL);} if (! El); var z = this; z.el = el; zp = getpos (EL); Zs = GetScroll (); Z.Clear = Function () {Window.Clearinterval (z.timer); z.timer = null}; zt = (new date) .Gettime (); Z.Step = Funct. ION () () {var t = (new date) .gettime (); var p = (t -zt) / duration; if (t> = duration + zt) {z.clear (); window.settimeout (function () {) { z.scroll(zpy, zpx) }, 13); } else { st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpy - zst) + zst; sl = (( -Math.cos (p * math.pi) / 2) + 0.5) * (zpx -zsl) + zsl; z.scroll (st, sl);}}; z.scroll = fuins (t, l) {Window .scrollto (l, t)}; z.timer = window.Setinterval (function () {z.Step ();}, 13);} </script> </head> <body> <div class = test> <a name = header_1 id = header_1> </a> <strong Onclick = javascript: scroller ('header_4', 800);> header_1-> header_4 </p> </p> </div> </div> </div> div class = test> <a name = header_2 id = header_2> </a> <strong Onclick = javascript: scroller ('header_5', 800);> Header_2-> Header_5 </strong> > </p> </div> <div class = test> <a name = header_3 id = header_3> </a> <strong Onclick = javascript: scroller ('header_6', 800); trong> <p > </div> <div class = test> <a name = header_4 id = header_4> </a> <strong Onclick = javascript: scroller ('header_7', 800);> header_4-> header _7 << /strong> <p> </p> </div> <div class = test> <a name = header_5 ID = header_5> </a> <strong knowledge = javascript: scroller ('header_3', 800); 5 -> Header_3 </strong> <p> </p> </div> <div class = test> <a name = header_6 id = header_6> </a> <strong onclick = javascript: scroller ('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: scroller ('Header_1', 800);> Header_7-> Header_1 </strong> <p> </p> </body> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.