网页定位

<script type="text/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)};
 z.timer = window.setInterval(function(){z.step();},13);
}

</script>

 <div class="test">
 <a name="header_1" id="header_1"></a>
 <strong οnclick="javascript:scroller('header_4', 10);">header_1 --> header_4</strong>
 <p></p>
</div>

<div class="test">
 <a name="header_2" id="header_2"></a>
 <strong οnclick="javascript:scroller('header_5', 10);">header_2 --> header_5</strong>
 <p></p>
</div>

<div class="test">
 <a name="header_3" id="header_3"></a>
 <strong οnclick="javascript:scroller('header_6', 10);">header_3 --> header_6</strong>
 <p></p>
</div>

<div class="test">
 <a name="header_4" id="header_4"></a>
 <strong οnclick="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 οnclick="javascript:scroller('header_3', 10);">header_5 --> header_3</strong>
 <p></p>
</div>

<div class="test">
 <a name="header_6" id="header_6"></a>
 <strong οnclick="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 οnclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
 <p></p>
</div>

<!--************************************* 实例代码结束 *************************************-->

 </div>

 <div id="back"><a href="/pub/html/javascript/tip/anchor_scroller/">返回 『用 Javascript 实现锚点(Anchor)间平滑跳转』</a></div>

</div>