jQuery:Scrolltop滑动插件推荐（修正注释版）

分类:jQuery, 插件开发 发表时间:2009年08月21日 字体大小:12号14号

前段时间DeepBlue发邮件问我，博客中的滑动到顶端的效果是如何实现的。我当时忙着做事，就简单地回复他说是用javascript实现的，但没有告诉他具体实现的办法。

今天在使用Google Reader时，在一篇文章里发现了这个插件，很小巧，代码也很易懂。于是乎，添加了中文注释与大家分享一下。（我修复了它的一个bug）先看看效果吧：(下载包里含有插件和一个简单的效果，请自行添加jQuery库)

downloaddemo

1.html\css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>scroll-to-top</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>
	<style type="text/css">
	* { margin:0; padding:0;}
	body { font:16px;}
 
	#wrapper { width:300px; font-size:40px; margin:0 auto; height:1500px;}
 
	#topcontrol { padding:10px 20px; background:#F90;}
	</style>
</head>
<body>
<div id="wrapper">top content</div>
</body>
</html>

说明：1.先将js文件引入；
2.我使用一个#wrapper的div将页面撑高；
3.我将通过插件插入的#topcontrol这个div进行简单的css修饰，更加清楚地发现它的位置。

2.插件javascript代码（含中文注释）：

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
84
85
86
87
88
89
90
91
92
93
94
95
96

var scrolltotop={
	//startline: 鼠标向下滚动了100px后出现#topcontrol
	//scrollto: 它的值可以是整数，也可以是一个id标记。若为整数（假设为n），则滑动到距离top的n像素处；若为id标记，则滑动到该id标记所在的同等高处
	//scrollduration:滑动的速度
	//fadeduration:#topcontrol这个div的淡入淡出速度，第一个参数为淡入速度，第二个参数为淡出速度
	//controlHTML:控制向上滑动的html源码，默认为<img src="up.png" style="width:48px; height:48px" />，可以自行更改。该处的html代码会被包含在一个id标记为#topcontrol的div中。
	//controlattrs:控制#topcontrol这个div距离右下角的像素距离
	//anchorkeyword:滑动到的id标签
	/*state: isvisible:是否#topcontrol这个div为可见
			shouldvisible:是否#topcontrol这个div该出现
	*/
 
	setting: {startline:100, scrollto: 0, scrollduration:500, fadeduration:[500, 100]},
	controlHTML: '<a href="#top">back-to-top</a>',
	controlattrs: {offsetx:5, offsety:5}, 
	anchorkeyword: '#top', 
 
	state: {isvisible:false, shouldvisible:false},
 
	scrollup:function(){
		if (!this.cssfixedsupport) {
			this.$control.css({opacity:0}) 
		};//点击后隐藏#topcontrol这个div
		var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto);
		if (typeof dest=="string" && jQuery('#'+dest).length==1) { //检查若scrollto的值是一个id标记的话
			dest=jQuery('#'+dest).offset().top;
		} else { //检查若scrollto的值是一个整数
			dest=this.setting.scrollto;
		};
		this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
	},
 
	keepfixed:function(){
		//获得浏览器的窗口对象
		var $window=jQuery(window);
		//获得#topcontrol这个div的x轴坐标
		var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx;
		//获得#topcontrol这个div的y轴坐标
		var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety;
		//随着滑动块的滑动#topcontrol这个div跟随着滑动
		this.$control.css({left:controlx+'px', top:controly+'px'});
	},
 
	togglecontrol:function(){
		//当前窗口的滑动块的高度
		var scrolltop=jQuery(window).scrollTop();
		if (!this.cssfixedsupport) {
			this.keepfixed();
		};
		//若设置了startline这个参数，则shouldvisible为true
		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false;
		//若shouldvisible为true，且!isvisible为true
		if (this.state.shouldvisible && !this.state.isvisible){
			this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]);
			this.state.isvisible=true;
		} //若shouldvisible为false，且isvisible为false
		else if (this.state.shouldvisible==false && this.state.isvisible){
			this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]);
			this.state.isvisible=false;
		}
	},
 
	init:function(){
		jQuery(document).ready(function($){
			var mainobj=scrolltotop;
			var iebrws=document.all;
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest; //not IE or IE7+ browsers in standards mode
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body');
 
			//包含#topcontrol这个div
			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
				.attr({title:'Scroll Back to Top'})
				.click(function(){mainobj.scrollup(); return false;})
				.appendTo('body');
 
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') {//loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}); //IE6- seems to require an explicit width on a DIV containing text
			};
 
			mainobj.togglecontrol();
 
			//点击控制
			$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
				mainobj.scrollup();
				return false;
			});
 
			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol();
			});
		});
	}
};
 
scrolltotop.init();

说明：1.修复代码28行的”dest=this.setting.scrollto“;，源代码为“dest=0”；
2.无须在原html代码中添加#top的标记，js会自动插入；
3.可以修改顶端代码的一些参数来控制滑动速度和其他的一些效果。

更多英文资料请阅读:http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

原始的插件代码下载地址(右键另存即可)：scrolltopcontrol.js

你也许会喜欢阅读这些：

不错不错，已经有 个评论！
  1. keelii
    2009年08月21日 18:22 回复

    又沙发了哈。JQuery要向你看齐。

    • Hiro
      2009年08月21日 20:41

      大家多多交流就会进步了！！

  2. 老饕
    2009年08月21日 18:56 回复

    呵呵，努力学习中！

  3. 蛋王
    2009年08月21日 19:10 回复

    哈，学习了。
    不过我还是喜欢你博客用的，一个锚点，简单又方便，都不用js。
    滚回去还是直接回去，对我来说没啥差别。

    • Hiro
      2009年08月21日 20:42

      这就叫萝卜青菜，各有所爱吧！我也比较喜欢简单点的！

  4. 小强
    2009年08月21日 22:29 回复

    学习一哈

  5. 数数
    2009年08月22日 19:24 回复

    学习了学习了~话说我主题里也有这个效果，但是研究半天没弄出来就直接#footer了。。。

  6. 小强
    2009年08月22日 22:16 回复

    学习一下 哦

  7. bolo
    2009年08月23日 09:52 回复

    厉害,注释了插件

  8. Blinux
    2009年08月24日 09:27 回复

    现在jQuery很流行啊

  9. DeepBlue
    2009年08月24日 21:28 回复

    这个问题，我后来在mg12的主页上看到了相关代码介绍：

    JavaScript 代码:

    * 回到页面顶部
    * @param acceleration 加速度
    * @param time 时间间隔 (毫秒)
    **/
    function goTop(acceleration, time) {
    acceleration = acceleration || 0.1;
    time = time || 16;

    var x1 = 0;
    var y1 = 0;
    var x2 = 0;
    var y2 = 0;
    var x3 = 0;
    var y3 = 0;

    if (document.documentElement) {
    x1 = document.documentElement.scrollLeft || 0;
    y1 = document.documentElement.scrollTop || 0;
    }
    if (document.body) {
    x2 = document.body.scrollLeft || 0;
    y2 = document.body.scrollTop || 0;
    }
    var x3 = window.scrollX || 0;
    var y3 = window.scrollY || 0;

    // 滚动条到页面顶部的水平距离
    var x = Math.max(x1, Math.max(x2, x3));
    // 滚动条到页面顶部的垂直距离
    var y = Math.max(y1, Math.max(y2, y3));

    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
    var speed = 1 + acceleration;
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

    // 如果距离不为零, 继续调用迭代本函数
    if(x > 0 || y > 0) {
    var invokeFunction = “goTop(” + acceleration + “, ” + time + “)”;
    window.setTimeout(invokeFunction, time);
    }
    }
    document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.

    HTML 代码:

    1
    TOP

  10. Hobo
    2009年08月28日 10:52 回复

    不错啊呵呵，这样帮助了很多人，对刚学习jQuery的人也很有好处啊。

  11. 漠海孤烟
    2009年09月2日 08:50 回复

    这插件还是有用处的，不错。嘿嘿，偶做前端的，难得见到做JQ，多交流

  12. 李先生
    2010年03月30日 13:42 回复

    收藏

  13. 阿四
    2010年04月8日 12:11 回复

    請問這個滑動的back-to-top字樣能否控制在950px的範圍內？因為我的blog是950px，這個字卻隨解析度屏寬而伸開到右下角，如果能做到950px內會比較理想點^_^

    • Hiro
      2010年04月8日 17:58

      将init方法里的.appendTo(‘body’)改为.appendTo($(‘#wrapper’)).然后用css控制位置即可！！

  14. 阿四
    2010年04月15日 12:44 回复

    您好，我試過跟上面的方法修改了，但卻沒能控制在950px，不知是不是我的css內寫法不對呢？我的css是這樣寫的：
    #wrapper { margin:0 auto; width: 950px; margin:0 auto; padding:0; }
    請問是不是我的寫法不對呢？

    • Hiro
      2010年04月15日 12:53

      首先margin:0 auto;重复，其次你若要把back-to-top链接靠960px的右下角，你需要将#wrapper { position;relative;}这样back-to-top链接才可以相对他居右下角！！

  15. 阿四
    2010年04月17日 23:02 回复

    網主您好，我照著網主的方法試了多遍，但卻貌似不太行，可能是我太菜鳥，弄來弄去都總沒能成功 @_@

  16. River
    2010年05月11日 18:35 回复

    ie6下如果加了防抖的css怎么办，还有你的demo在ie6下没效果

    • ie6飘过
      2010年11月13日 11:20

      IE6确实不兼容，没效果

  17. kiakia
    2010年09月1日 17:07 回复

    我想在我的博客里添加这个插件，但总是不成功~~可以帮我解决一下吗？？

    • Hiro
      2010年09月1日 17:18

      请转而使用：http://www.ihiro.org/plugins-garden/scrolltop-plugin，更加简单（我写的）！

我要评论

  • * *