<!-- Origin Article URL: http://www.wretch.cc/blog/FoxbrushLiu/840305 --> <br><a href="http://www.codebit.cn/examples/anchor-scroller-example">Example </a><br><br><span> </span><script type="text/javascript"><br> <br>// 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转<br>// 来源 :ThickBox 2.1<br>// 整理 :Yanfu Xie [xieyanfu@yahoo.com.cn]<br>// 网址 :http://www.codebit.cn<br>// 日期 :07.01.17<br> <br>// 转换为数字<br>function intval(v)<br>{<br> v = parseInt(v);<br> return isNaN(v) ? 0 : v;<br>}<br> <br>// 获取元素信息<br>function getPos(e)<br>{<br> var l = 0;<br> var t = 0;<br> var w = intval(e.style.width);<br> var h = intval(e.style.height);<br> var wb = e.offsetWidth;<br> var hb = e.offsetHeight;<br> while (e.offsetParent){<br> l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);<br> t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);<br> e = e.offsetParent;<br> }<br> l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);<br> t += e.offsetTop + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);<br> return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};<br>}<br> <br>// 获取滚动条信息<br>function getScroll()<br>{<br> var t, l, w, h;<br> <br> if (document.documentElement && document.documentElement.scrollTop) {<br> t = document.documentElement.scrollTop;<br> l = document.documentElement.scrollLeft;<br> w = document.documentElement.scrollWidth;<br> h = document.documentElement.scrollHeight;<br> } else if (document.body) {<br> t = document.body.scrollTop;<br> l = document.body.scrollLeft;<br> w = document.body.scrollWidth;<br> h = document.body.scrollHeight;<br> }<br> return { t: t, l: l, w: w, h: h };<br>}<br> <br>// 锚点(Anchor)间平滑跳转<br>function scroller(el, duration)<br>{<br> if(typeof el != 'object') { el = document.getElementById(el); }<br> <br> if(!el) return;<br> <br> var z = this;<br> z.el = el;<br> z.p = getPos(el);<br> z.s = getScroll();<br> z.clear = function(){window.clearInterval(z.timer);z.timer=null};<br> z.t=(new Date).getTime();<br> <br> z.step = function(){<br> var t = (new Date).getTime();<br> var p = (t - z.t) / duration;<br> if (t >= duration + z.t) {<br> z.clear();<br> window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);<br> } else {<br> st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;<br> sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;<br> z.scroll(st, sl);<br> }<br> };<br> z.scroll = function (t, l){window.scrollTo(l, t)};<br> z.timer = window.setInterval(function(){z.step();},13);<br>}<br> <br></script>