摘要: 锚点(Anchor)相信很多人都不陌生,它方便访问者在页面的不同位置快速跳转,直接找到自己感兴趣的内容,如果说 RSS 是整个网站的摘要,那锚点就是一个页面的摘要,通常一个页面内容很多的时候,都会用锚点来定位。
但是锚点也有个问题,通常点击锚点后,页面会立即跳到目标位置,而本文介绍的方法,实现了锚点(Anchor)间平滑跳转,效果非常不错。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} 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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} return
{ t: t, l: l, w: w, h: h };
43
}
44
// 锚点(Anchor)间平滑跳转 function scroller(el, duration) {
45![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
z.clear = function()
{
55
window.clearInterval(z.timer);
56
z.timer=null
57
};
58
z.t=(new Date).getTime();
59![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
z.step = function()
{
60
var t = (new Date).getTime();
61
var p = (t - z.t) / duration;
62![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (t >= duration + z.t)
{
63
z.clear();
64![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
window.setTimeout(function()
{z.scroll(z.p.y, z.p.x)},13);
65
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
} 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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
z.scroll = function (t, l)
{
74
window.scrollTo(l, t)
75
};
76![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
z.timer = window.setInterval(function()
{z.step();},13);
77
}
78
</script>
79![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)