Hiro技术站

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源文件的头部添加任何标签，只需调用方法即可实现效果！

评论数:11 条 浏览次数:191 views
不错不错，已经有 个评论！
  1. MOPVHS
    2010年03月13日于22:56 回复

    那个..囧了…我突然发现不知道怎么写..那个变量传输..

  2. Sidney Crosby olympic jersey
    2010年06月29日于00:12 回复

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

  3. Cheap Timberland Boots
    2010年07月21日于13:14 回复

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

  4. mbt shoes
    2010年07月21日于14:15 回复

    I’m excited about this.

  5. mbt professional shoes
    2010年07月23日于10:00 回复

    I think you were extremely smart

  6. gucci bags
    2010年07月27日于14:06 回复

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

    • Hiro
      2010年07月27日于17:08

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

  7. kiakia
    2010年09月1日于17:27 回复

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

    • Hiro
      2010年09月1日于17:30

      请自己查看demo页面的源代码，上班没空教你！

我要评论

* *