javascript 动态数据下的锚点错位问题解决方法

代码如下:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
  <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> 
  <script language="javascript"> 
  // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 
   
  // 转换为数字 
  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}; }  
   // 获取滚动条信息 
   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 }; 
   }  
   // 锚点(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>

相关推荐