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. xiaorsz Dec 19th, 2008 @ 20:01 | #1

    发现每次无意中来都发现有新文章了,呵呵!
    这个不是锚点也可以滑动的!!你把表情删了?

  2. yinheli Dec 19th, 2008 @ 20:07 | #2

    @xiaorsz
    囧….我调试了.看看opera的问题能不解决.但是还不行.唉.不懂技术….凑合着用好了.现在代码被我搞的有点乱.心情也有点乱.不想整理了.等等mg12有了大的改动的时候我在弄.现在就这样用了.
    对了文章是前几天写好的.自动发布.这两天烦死了.不想写.

  3. 开心 Dec 19th, 2008 @ 20:23 | #3

    就跟mg12这个皮肤的top一样的效果吗?

  4. yinheli Dec 19th, 2008 @ 20:32 | #4

    @开心
    是的…明天会发个”让@someone也实现平滑移动” 这篇是基础.

  5. 开心 Dec 19th, 2008 @ 20:57 | #5

    学习学习,不过我不用了,这种东西用多了也是累赘 :razz: 实话实说哦,别在意呀,朋友 :roll:

  6. yinheli Dec 19th, 2008 @ 21:16 | #6

    @开心
    算是有利于用户体验吧

  7. JoBru Dec 19th, 2008 @ 23:03 | #7

    效果不错的说,不过你现在都转向技术方面了,专业真的不感兴趣么~

  8. Shawn Dec 19th, 2008 @ 23:05 | #8

    @xiaorsz
    这个不就是 xiaorsz 最开始用的那个吗。。。

  9. Shawn Dec 19th, 2008 @ 23:10 | #9

    而且这个你要找作者还真不好找,因为是出自 jQuery 官方的 thickbox 插件内的代码。

  10. yinheli Dec 19th, 2008 @ 23:19 | #10

    @Shawn
    是的上次看到了…后来Google了好久也没有找到.xiaorsz之前介绍了一个js代码.但是不是这个.
    实际使用到博客上的是现在的这个.比较好用易于控制.我还真不知道这原来是thickbox 插件内的代码.呵呵

  11. yinheli Dec 19th, 2008 @ 23:23 | #11

    @JoBru
    这个文章是前几天写的…定时发布.应为这段时间没有空写.忙着复习了.下个阶段开始将不再过多的过问网页方面的东西.专心本专业.可能会写写考研啊,或者医学保健方面的东西.

  12. 农民 Dec 19th, 2008 @ 23:55 | #12

    那部电影真的不错呢,我的女友是机器人,图拿去呢。

  13. yinheli Dec 20th, 2008 @ 00:03 | #13

    @农民
    哈哈..有时间看看去.等忙完考试先

  14. Yacca Dec 20th, 2008 @ 00:07 | #14

    @yinheli footer部分的blog age…很可爱的小功能? 自动计数的么?
    code email 我吧…我也去加个

  15. popdo Dec 20th, 2008 @ 00:31 | #15

    你取消了功能了?我点击你的评论描点,怎么是直接跳至!

  16. yinheli Dec 20th, 2008 @ 05:21 | #16

    @Yacca
    是的用php来计算时间.
    @popdo
    没有取消啊.可能是js还没有加载完毕.现在页面js比较多了.代码也被我改得有点乱.没有时间整理

  17. 飞雪网 Dec 20th, 2008 @ 08:35 | #17

    终于显示出来了,害的我还重新做了张图片。
    本来的图片只有飞雪网祝大家圣诞快乐。
    alimama居然审核不通过。。。郁闷。。

    这个冬天,我们一起看飞雪!
    这广告词怎么样?想了好久了的。。

  18. YoungCheon Dec 20th, 2008 @ 16:05 | #18

    这个确实好用,我就用了,调用简单,而且不用修改xhtml文档,我在ie6, ie7 , firefox, opera ,safari,google chrome都试验过,都兼容

  19. YoungCheon Dec 20th, 2008 @ 16:25 | #19

    这个好象是jquery的 smooth-scroll插件 演示地址:http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

  20. yinheli Dec 20th, 2008 @ 16:31 | #20

    @YoungCheon
    好像不一样. 这个和xiaorsz上次分享的那个一样.这个的代码要简单一点.在jQuery下就算是没有链接.单击一个div或者段落.就是说任何一个页面元素都可以实现这种效果.你说的那个好像是有点局限于链接上的.

  21. yinheli Dec 20th, 2008 @ 16:40 | #21

    @飞雪网
    刚刚才看到…有链接没有通过审核了.不错. 哈哈 :grin:

  22. 老杨 May 13th, 2009 @ 10:16 | #22

    你好,看了你的介绍,觉得很不错。不过那个文件下载失效了,不知道能不能麻烦发给我一份semor.yang@qq.com非常感谢

  23. yinheli May 13th, 2009 @ 12:24 | #23

    @老杨
    直接复制就行了.

  24. 老杨 May 13th, 2009 @ 14:57 | #24

    @yinheli
    我想下载那个单独的实例学习一下,呵呵

  25. Y.Jiajia May 13th, 2009 @ 18:37 | #25

    竟然收关键字到了这里,这个正好需要,谢谢了~

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