Use of anchor points in HTML

Now let's summarize some of the things that control the anchor point:

1. On the same page
[HTML] View plaincopy

<a name= "Add" ></a><!--define anchor points--
<a href= "#add" > Jump to Add</a>
2. On different pages. Anchor point positioning in a.html, a link from another page jumps to this anchor point
[HTML] View plaincopy
<a href= "A.html#add" > Jump to A.add</a>
3. Click the link to send JS events, the same time to jump to the anchor point, there are two ways to handle:
The first type:
[HTML] View plaincopy
<a href= "#add" onclick= "Add ()" > trigger the Add function and jump to the add Anchor point </a>
Another type of:
[HTML] View plaincopy
<div id= "Divnode" ><!--contents--></div><!--If one needs to jump to the node--
<a href= "#" onclick= "Document.getelemetnbyid (' Divnode '). scrollIntoView (True); return false;" > through scrollIntoView for anchoring effects </a>

There are several ways to set anchor point positioning in HTML, using ID positioning, using name positioning, using JS positioning, these methods are not necessarily the most complete, only to be able to participate in the test

1. Use ID to locate:

This position can be positioned for whatever label.  

2, use name to locate:  

using the Name property can only be used to locate a tag, while other tags such as div cannot be positioned.

3, use JS positioning

Instance:

JS Anchor Point Smooth positioning

<!            DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" > 
 0:v;                }//? Take element Information function GetPos (e) {var L = 0;                var t = 0;                var w = intval (e.style.width);                var h = intval (e.style.height);                var wb = E.offsetwidth;                var HB = E.offsetheight;  while (e.offsetparent) {L + = E.offsetleft + (e.currentstyle? Intval (e.currentstyle.borderleftwidth):                    0); T + = E.offsettop + (e.currentstyle? 
)
 Intval (E.currentstyle.bordertopwidth): 0);                e = e.offsetparent;                } L + = E.offsetleft + (e.currentstyle? Intval (E.currentstyle.borderleftwidth): 0);                T + = E.offsettop + (E.currentstyle intval (e.currentstyle.bordertopwidth): 0);                    return {x:l, y:t, W:w, H:h,            WB:WB, HB:HB}; }//? 
The message function Getscroll () {var t, L, W, H; if (document.documentelement && document.documentElement.scrollTop) {t = Document.documentelem                    Ent.scrolltop;                    L = document.documentElement.scrollLeft;                    W = document.documentElement.scrollWidth;                h = document.documentElement.scrollHeight;                        } 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:w, H:            h}; }//? point (Anchor)?
Smooth jump?
               function Scroller (el, duration) {if (typeof el! = ' object ') {el = Docume                Nt.getelementbyid (EL);                } if (!el) return;                var z = this;                Z.el = El;                Z.P = GetPos (EL);                Z.S = Getscroll ();                    Z.clear = function () {window.clearinterval (Z.timer);                Z.timer = null};                z.t = (new Date). GetTime ();                    Z.step = function () {var t = (new Date). GetTime ();                    var p = (t-z.t)/duration;                        if (t >= duration + z.t) {z.clear ();                    Window.settimeout (function () {Z.scroll (Z.P.Y, z.p.x)}, 13); } else {st = ((-math.cos (p * Math.PI)/2) + 0.5) * (Z.P.Y-Z.S.T) +Z.S.T;                        SL = ((-math.cos (p * Math.PI)/2) + 0.5) * (Z.P.X-Z.S.L) + Z.S.L;                    Z.scroll (ST, SL);                }                };                Z.scroll = function (T, l) {Window.scrollto (L, t)};                Z.timer = Window.setinterval (function () {z.step ();            }, 13);  } </script> 

Use of anchor points in HTML