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

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

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

 

Code
 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);
10     return isNaN(v) ? 0 : v;
11 
12}  
13// 获取元素信息 function getPos(e) {
14     var l = 0;
15     var t  = 0;
16     var w = intval(e.style.width);
17     var h = intval(e.style.height);
18     var wb = e.offsetWidth;
19     var hb = e.offsetHeight;
20     while (e.offsetParent){
21         l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
22         t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
23         e = e.offsetParent;
24     }
25     l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
26     t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
27     return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
28 
29}  
30// 获取滚动条信息 function getScroll()  {
31     var t, l, w, h;
32         if (document.documentElement && document.documentElement.scrollTop) {
33         t = document.documentElement.scrollTop;
34         l = document.documentElement.scrollLeft;
35         w = document.documentElement.scrollWidth;
36         h = document.documentElement.scrollHeight;
37          } else if (document.body) {
38         t = document.body.scrollTop;
39         l = document.body.scrollLeft;
40         w = document.body.scrollWidth;
41         h = document.body.scrollHeight;
42}     return { t: t, l: l, w: w, h: h };
43}  
44// 锚点(Anchor)间平滑跳转 function scroller(el, duration) {
45     if(typeof el != 'object') {
46     el = document.getElementById(el);
47 
48     }      
49     if(!el) return;
50     var z = this;
51     z.el = el;
52     z.p = getPos(el);
53     z.s = getScroll();
54     z.clear = function(){
55    window.clearInterval(z.timer);    
56    z.timer=null
57    };
58     z.t=(new Date).getTime();
59     z.step = function(){
60         var t = (new Date).getTime();
61         var p = (t - z.t) / duration;
62         if (t >= duration + z.t) {
63             z.clear();
64             window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
65         
66    } else {
67             st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
68             sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
69             z.scroll(st, sl);
70         
71    }     
72    };
73     z.scroll = function (t, l){
74    window.scrollTo(l, t)
75    };
76     z.timer = window.setInterval(function(){z.step();},13);
77}  
78</script>  
79

转载于:https://www.cnblogs.com/Nullin/archive/2008/09/13/1290316.html