Home > Technology > 页面内锚点平滑移动

页面内锚点平滑移动

分享一个基于jQuery的页面内平滑移动的js.其实这段js在前面已经用到过了.目前本站的平滑移动,还有xiaorszZoll的都是用的这个.
今天只是拿过来单独介绍一下.这个和xiaorsz之前介绍的” 分享 JS 代码:同一页面链接平滑跳转”有所不同.使用简单.具有跟多的灵活性.本来是想找到这个js的作者的页面的.但是找了好久也没有找到.下次找到再告诉大家吧.
代码如下:(比较长,不做解释了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
jQuery.getPos = function (e){
 var l = 0;
 var t = 0;
 var w = jQuery.intval(jQuery.css(e,'width'));
 var h = jQuery.intval(jQuery.css(e,'height'));
 var wb = e.offsetWidth;
 var hb = e.offsetHeight;
 while (e.offsetParent){
 l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
 t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
 e = e.offsetParent;
 }
 l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
 t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
 return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
};
jQuery.getClient = function(e){
 if (e) {
 w = e.clientWidth;
 h = e.clientHeight;
 } else {
 w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document
.body.offsetWidth;
 h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight :
document.body.offsetHeight;
 }
 return {w:w,h:h};
};
jQuery.getScroll = function (e){
 if (e) {
 t = e.scrollTop;
 l = e.scrollLeft;
 w = e.scrollWidth;
 h = e.scrollHeight;
 } else {
 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 };
};
jQuery.intval = function (v){
 v = parseInt(v);
 return isNaN(v) ? 0 : v;
};
jQuery.fn.ScrollTo = function(s) {
 o = jQuery.speed(s);
 return this.each(function(){
 new jQuery.fx.ScrollTo(this, o);
 });
};
jQuery.fx.ScrollTo = function (e, o)
{
 var z = this;
 z.o = o;
 z.e = e;
 z.p = jQuery.getPos(e);
 z.s = jQuery.getScroll();
 z.clear = function(){clearInterval(z.timer);z.timer=null};
 z.t=(new Date).getTime();
 z.step = function(){
 var t = (new Date).getTime();
 var p = (t - z.t) / z.o.duration;
 if (t >= z.o.duration+z.t) {
 z.clear();
 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=setInterval(function(){z.step();},13);
};

如何调用?很简单

1
2
3
4
5
$().ready(function(){
$('起点').click(function(){
$("目标").ScrollTo(时间);return false;
});
});

如上所示,单击起点.滑动到目标.设定好时间.单位为毫秒即可.下载单独的实例文件.你也可以单击本博客上的各个页内链接体验一下.

  1. 沿阶草 Jun 10th, 2009 @ 18:53 | #26

    @老杨
    不能下载了 呵呵 我也想要

  2. 阿修 Jun 16th, 2009 @ 16:25 | #27

    嗯,效果不错,已经使用了。

  3. BonniePory Aug 30th, 2009 @ 11:49 | #28

    不会用…把代码粘贴在那里呢?

Submitting Comment, Give me a second...
Comment pages 1 2

Leave a comment

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Trackbacks & Pingbacks ( 2 )
  1. Jan 3rd, 2009 @ 09:19 | #1
    Pingback: 16行jQuery代码实现锚点scoll效果
  2. Sep 10th, 2009 @ 22:44 | #2
    Pingback: 16行jQuery代码实现锚点scoll效果 « PopDo