Hiro.scrollTop:简约的scrollTop滑动置顶插件

发表时间:2010年01月9日 最近更新时间: 字体大小:12号14号

之前最早写的并且发布出来的简约的scrollTop插件,代码只有十多行非常简单,也非常实用,适合大众使用!

这也是算是我的jQuery插件开发之旅的开端吧,以后一有机会我就会陆续开发一些自己的插件,也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说,上插件!

downloaddemo

插件代码:

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
jQuery.fn.extend({
 
	scrollTop: function(params) {
 
		// 给出默认的参数值
		// 默认情况下,不传参数,没有滑动效果:scrollAnimation = false
		// 若只传一个参数scrollAnimation: true,则默认的速度是500
		var scrollAnimation = false, speed = 500;
 
		if(params != null) {
			scrollAnimation = params.scrollAnimation;
			speed = params.speed;
 
			if(speed == null || speed == 'normal') {
				speed = 500;
			} else if(speed == 'fast') {
				speed = 200;
			} else if(speed == 'slow') {
				speed = 2000;
			};
		};
 
		this.click(function() {
			if(!scrollAnimation) {
				window.scrollTo(0, 0);
			} else {
				$('html, body').animate({scrollTop: '0'}, speed);
			};
 
			return false;
		});
	}
 
});

参数说明:

1. scrollAnimation 为布尔型, 控制是否需要动态滑动, 可选值:ture、false
2. speed 控制滑动速度,只有scrollAnimation设置为true时才起到作用, 可选值:slow、normal、fast、任意数字

使用方法:(假设有html文档中一个class为top的标签)

1. 直接跳到顶部:
$(‘.top’).scrollTop();

2. 以默认的速度滑行到顶部:
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’});
或 $(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘normal’});

3. 自定义速度滑行到顶部:可选值:slow、fast、任意数字
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘slow’}); 移动到顶部的时间为2000毫秒
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ‘fast’}); 移动到顶部的时间为200毫秒
$(‘.top’).scrollTop({‘scrollAnimation’: ‘true’, ‘speed’: ’1000′}); 移动到顶部的时间为1000毫秒

总结:

该插件的好处是无需在html源文件的头部添加任何标签,只需调用方法即可实现效果!

评论数:14 浏览次数:459 views
不错不错,已经有 个评论!
  1. 那个..囧了…我突然发现不知道怎么写..那个变量传输..

  2. This is so brilliant, not only as a theory, but to put into practice.

  3. Thank you God,thank you, and thanks to all the other warriors – for this blog

  4. I’m excited about this.

  5. I think you were extremely smart

  6. I confess I need bit time to read all the post, hope it stay here some days.

    • They will always stay there!!Please help yourself!!

  7. zblog可以用吗???我对jQuery一窍不通。。加我qq教教我吧~~~三六三五七五六二一

    • 请自己查看demo页面的源代码,上班没空教你!

  8. 这一阵刚开始学学用wordpress,不经意通过google找到了www.ihiro.org,蛮爱您blog的风格,看了您的美文感觉学到很多东西,您的佳作特别实用。也非常容易领会。心里算算此文应该是俺在您博上偷学的第5招了!嘿嘿:)继续努力哦!真心希望您的博更上一层楼。

    • 共同进步

  9. Your article bare the true thinking of showing your true feelings between the lines, I had great insights, hoping to interact more!

我要评论

  • * *