用 Javascript 实现锚点(Anchor)间平滑跳转

摘要: 锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。

但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。

 

 1<script type="text/javascript">  
 2// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转 
 3// 来源 ：ThickBox 2.1 
 4// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn] 
 5// 网址 ：http:
 6//www.codebit.cn 
 7// 日期 ：07.01.17  
 8// 转换为数字 function intval(v) {
 9     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>