<title> using Javascript to achieve smooth jump between anchor points (anchors) </title>
<script language= "JavaScript" >
Description: Use Javascript to achieve a smooth jump between anchors (anchor).
Convert to Number
function Intval (v)
{
v = parseint (v);
return isNaN (v)? 0:v;
}
Get 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}; }
Get scroll bar information
function Getscroll ()
{
var T, L, W, H;
if (document.documentelement && document.documentElement.scrollTop)
{
t = Document.documentElement.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};
}
Smooth jumps between anchor points (anchors)
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>
<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>
