Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> achieve smooth jump between Anchor using Javascript </title>
<Script language = "javascript">
// Note: use Javascript to achieve smooth jump between Anchor
// Convert to a number
Function intval (v)
{
V = parseInt (v );
Return isNaN (v )? 0: v;
}
// Obtain 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 };}
// Obtain the scroll bar Information
Function getScroll ()
{
Var t, l, w, h;
If (document.doc umentElement & document.doc umentElement. scrollTop)
{
T = document.doc umentElement. scrollTop;
L = document.doc umentElement. scrollLeft;
W = document.doc umentElement. scrollWidth;
H = document.doc umentElement. 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 };
}
// Smooth jump between Anchor
Function scroller (el, duration)
{
If (typeof el! = 'Object ')
{
El = document. 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-20 )};
Z. timer = window. setInterval (function () {z. step () ;}, 13 );
}
</Script>
<Style type = "text/css">
Div. test
{
Width: 400px; margin: 5px auto; border: 1px solid # ccc;
}
Div. test strong
{Font-size: 16px; background: # fff; border-bottom: 1px solid # aaa; margin: 0; display: block; padding: 5px 0; text-decoration: underline; color: # 059B9A; cursor: pointer;} div. test p {height: 400px; background: # f1f1f1; margin: 0;
}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div class = "test">
<A name = "header_1" id = "header_1"> </a>
<Strong onclick = "javascript: scroller ('header _ 4', 800);"> header_1 --> header_4 </strong> <p> </p>
</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> </p>
</Div>
<Div class = "test">
<A name = "header_3" id = "header_3"> </a>
<Strong onclick = "javascript: scroller ('header _ 6', 800);"> header_3 --> header_6 </strong> <p> </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 onclick = "javascript: scroller ('header _ 3', 800);"> header_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>
</Div>
</Form>
</Body>
</Html>