javascript 動(dòng)態(tài)數(shù)據(jù)下的錨點(diǎn)錯(cuò)位問題解決方法

更新時(shí)間：2008年12月24日 23:22:20 作者：

用 Javascript 實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn)

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
　　<title>用 Javascript 實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn)</title> 
　　<script language="javascript"> 
　　// 說明 ：用 Javascript 實(shí)現(xiàn)錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn) 
　　 
　　// 轉(zhuǎn)換為數(shù)字 
　　function intval(v) 
　　{　　 
　　v = parseInt(v);　　 
　　return isNaN(v) ? 0 : v; 
　　}　 
　　// 獲取元素信息 
　　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}; }　 
　　 // 獲取滾動(dòng)條信息 
　　 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 }; 
　　 }　 
　　 // 錨點(diǎn)(Anchor)間平滑跳轉(zhuǎn) 
　　 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> 