js实现平滑跳转到锚点(Anchor)

 

锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。
　　但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。

<SCRIPT type=text/javascript> 
  

// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转 
  
// 来源 ：ThickBox 2.1 
  
// 整理 ：Yanfu Xie [[e-mail]] 
  
// 网址 ：http://www.codebit.cn 
  
// 日期 ：07.01.17 
  

// 转换为数字 
  
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> 
  

<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>

调用方法：

scroller(el, duration)

el : 目标锚点 ID 
duration : 持续时间，以毫秒为单位，越小越快