☰

Lite Add button for Smooth Scroll to the top / bottom

为页面添加按钮，平滑的滚动到顶部/底部

当前为 2015-08-05 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name	Lite Add button for Smooth Scroll to the top / bottom
  3. // @author	burningall
  4. // @description	为页面添加按钮，平滑的滚动到顶部/底部
  5. // @version     2015.8.6.1
  6. // @include		*
  7. // @grant       GM_addStyle
  8. // @run-at		document-start
  9. // @compatible  chrome  完美支持
  10. // @compatible  firefox  完美支持
  11. // @license     The MIT License (MIT); http://opensource.org/licenses/MIT
  12. // @supportURL		http://www.burningall.com
  13. // @contributionURL	troy450409405@gmail.com|alipay.com
  14. // @namespace https://greasyfork.org/zh-CN/users/3400-axetroy
  15. // ==/UserScript==
  16. // 
  17. // 
  18. // 
  19. //=======快捷键======
  20. //alt+1>>>>>>回到顶部
  21. //alt+2>>>>>>去到底部
  22. //================公共函数区============
  23. (function(window,document){
  24.  
  25. function addEvent(obj, type, fn){
  26. 	return obj.addEventListener ?
  27. 			obj.addEventListener(type, function(e){
  28. 				var ev = window.event ? window.event : (e ? e : null);
  29. 				ev.target = ev.target || ev.srcElement;
  30. 				if( fn.call(obj,ev)===false ){//回掉函数为false，则阻止默认时间
  31. 					e.cancelBubble = true;//阻止冒泡
  32. 					e.preventDefault();//chrome，firefox下阻止默认事件
  33. 				}
  34. 			}, false)
  35. 			 :
  36. 			obj.attachEvent('on' + type, function(e){
  37. 				//fn.call(obj,e);//解决IE8下，this是window的问题
  38. 				var ev = window.event ? window.event : (e ? e : null);
  39. 				ev.target = ev.target || ev.srcElement;
  40. 				if(fn.call(obj,ev)===false ){
  41. 					e.cancelBubble = true;//阻止冒泡
  42. 					return false;//阻止默认事件，针对IE8
  43. 				}
  44. 			});
  45. }
  46.  
  47. function getSize(obj) {
  48. 	return document.documentElement[obj] !== 0 ? document.documentElement[obj] : document.body[obj];
  49. }
  50.  
  51. function hasScroll() {
  52. 	return getSize('scrollHeight') > getSize('clientHeight') ? true : false;
  53. }
  54.  
  55. function getStyle(obj, attr) {
  56. 	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
  57. }
  58.  
  59. function $(id) {
  60. 	return document.getElementById(id);
  61. }
  62.  
  63. function animate(obj,json,cfgjson){
  64. 		clearInterval(obj.animate);
  65. 		obj.animate = setInterval(function() {
  66. 			var bStop = true;//判断运动是否停止
  67. 			for(var attr in json){//attr代表属性,'width','height'.而json[attr]代表数值
  68. 				// 1. 取得当前的值（可以是width，height，opacity等的值）
  69. 				var objAttr = 0 ;
  70. 				if(attr == 'opacity'){//获取当前数值
  71. 					objAttr = Math.round(parseFloat( getStyle(obj,attr) ) * 100);
  72. 				}else{
  73. 					objAttr = parseInt( getStyle(obj,attr) );
  74. 				}
  75. 				// 2.计算运动速度
  76. 				var jsonattr = parseFloat( json[attr] );
  77. 				var speedConfig = (cfgjson && typeof ( cfgjson.speed ) != 'undefined') ? cfgjson.speed : 10;
  78. 				var iSpeed = (jsonattr - objAttr) / speedConfig;	//(目标数值-当前数值)/10
  79. 				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);	//如果速度>0，则速度向上取整，如果小于0，则保留小数
  80. 				// 3. 检测所有运动是否到达目标
  81. 				//objAttr,当前点，json[attr]为目标点
  82. 				if ( (iSpeed>0 && objAttr <= jsonattr) || (iSpeed<0 && objAttr >= jsonattr) ) {//如果有其中一项没有达到目标
  83. 					bStop = false;
  84. 				}
  85. 				if (attr == "opacity") {
  86. 					obj.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')';
  87. 					obj.style.opacity = (objAttr + iSpeed) / 100;
  88. 				} else {
  89. 					obj.style[attr] = objAttr + iSpeed + 'px';	//赋值开始运动
  90. 				}
  91. 				if (bStop) { // 表示所有运动都到达目标值
  92. 					clearInterval(obj.animate);
  93. 					if( cfgjson && typeof cfgjson.endFn != 'undefined' ){
  94. 						cfgjson.endFn.call(obj);
  95. 					}
  96. 				}
  97. 			}//for
  98. 		},20);
  99. }
  100. //================样式区============
  101. var cssText = '\
  102. #scrollMars-troy{\
  103. 	position:fixed;\
  104. 	right:30px;\
  105. 	z-index:9999999;\
  106. }\
  107. \
  108. .sroll-btn-troy{\
  109. 	width:50px;\
  110. 	height:50px;\
  111. 	text-align:center;\
  112. 	background:#303030;\
  113. 	color:#fff;\
  114. 	display:block;\
  115. 	opacity:0.8;\
  116. 	fitter:alpha(opacity:80);\
  117. 	cursor:pointer;\
  118. 	border-radius:50%;\
  119. 	box-shadow:2px 2px 40px 2px #303030;\
  120. 	line-height:50px;\
  121. 	font-size:35px;\
  122. 	font-style:inherit;\
  123. 	font-weight:bold;\
  124. 	font-family:"宋体";\
  125. }\
  126. #scrollMars-troy>div>div:hover{\
  127. 	background:#FF0000;\
  128. }\
  129. #mars-point{\
  130. 	width:100px;\
  131. 	height:100px;\
  132. 	position:absolute;\
  133. 	top:0;\
  134. 	left:-40px;\
  135. }\
  136. '
  137. GM_addStyle(cssText);
  138. //================主要代码区============
  139. function scroll(dir) { //obj随意，dir>0往上滚，dir<0往下滚
  140. 	var position,speed,scrollTop,scrollHeight,clientHeight;
  141. 	clearInterval(document.timerScroll);
  142. 	scrollHeight = getSize('scrollHeight');
  143. 	clientHeight = getSize('clientHeight');
  144. 	document.timerScroll = setInterval(function() {
  145. 		scrollTop = getSize('scrollTop');	
  146. 		if (dir > 0) { //往上滚动
  147. 			speed = ( scrollTop/10 ) + 1;
  148. 			position = scrollTop - speed;
  149. 			if (position <= 0) { //如果滚到顶部
  150. 				document.body.scrollTop = document.documentElement.scrollTop = 0;
  151. 				clearInterval(document.timerScroll);
  152. 			}
  153. 		} else { //往下滚动
  154. 			speed = ( (scrollHeight-scrollTop-clientHeight) / 10 ) + 1;
  155. 			position = scrollTop + speed;
  156. 			if (position + clientHeight >= scrollHeight) { //如果滚到底部
  157. 				document.body.scrollTop = document.documentElement.scrollTop = scrollHeight;
  158. 				clearInterval(document.timerScroll);
  159. 			}
  160. 		}
  161. 		document.body.scrollTop = document.documentElement.scrollTop = position;
  162. 	}, 20);
  163. }
  164.  
  165. function marsMove(dir){
  166. 	var mars = $('scrollMars-troy');
  167. 	var point = $('mars-point');
  168. 	if(dir=="moveIn"){//移入
  169. 		clearTimeout(mars.timerHover); 
  170. 		animate(mars,{"right":"30","opacity":"100"});
  171. 		animate(point,{"left":"0"});
  172. 	}else if(dir=="moveOut"){//移出
  173. 		clearTimeout(mars.timerHover);
  174. 		mars.timerHover = setTimeout(function(){
  175. 			animate(mars,{"right":"-30","opacity":"30"});
  176. 			animate(point,{"left":"-40"});
  177. 		},3000);
  178. 	}
  179. }
  180.  
  181. function init() {
  182. 	var scrollBtn = $("scrollMars-troy");
  183. 	if( scrollBtn ){
  184. 		scrollBtn.style.top = (getSize('clientHeight') / 3) + 'px';
  185. 	}
  186. 	if (hasScroll() === true && !scrollBtn) { //如果有滚动条，并且没有按钮
  187. 		var mars = document.createElement('div'),goTop,goBtm,point;
  188. 		mars.id = "scrollMars-troy";
  189. 		window.top.document.documentElement.appendChild(mars);
  190. 		mars.innerHTML = "\
  191. 		<div id='mars-point'></div>\
  192. 		<div>\
  193. 			<div id='goTop-troy' title='返回顶部' class='sroll-btn-troy'></div>\
  194. 			<div id='goBtm-troy' title='去到底部' class='sroll-btn-troy'></div>\
  195. 		</div>\
  196. 		";
  197. 		goTop = $("goTop-troy");
  198. 		goBtm = $("goBtm-troy");
  199. 		goTop.innerHTML = "↑";
  200. 		goBtm.innerHTML = "↓";
  201. 		$('scrollMars-troy').style.top = (getSize('clientHeight') / 3) + 'px';
  202. 		addEvent(goTop, "click", function() {
  203. 			scroll(1);
  204. 			return false;
  205. 		});
  206. 		addEvent(goBtm, "click", function() {
  207. 			scroll(-1);
  208. 			return false;
  209. 		});
  210. 		addEvent(mars,'mouseover',function(){
  211. 			marsMove("moveIn");
  212. 			return false;
  213. 		});
  214. 		addEvent(mars,'mouseout',function(){
  215. 			marsMove("moveOut");
  216. 			return false;
  217. 		});
  218. 		addEvent(mars,'mousedown',function(){
  219. 			return false;
  220. 		});
  221. 		marsMove("moveOut");
  222. 	}
  223. }
  224. //================执行区============
  225. addEvent(document,"mousewheel",function(){
  226. 	clearInterval(document.timerScroll);
  227. });
  228. addEvent(document,"DOMMouseScroll",function(){
  229. 	clearInterval(document.timerScroll);
  230. });
  231.  
  232. addEvent(window.top, "resize", function() { //页面大小改变，初始化按钮
  233. 	init();
  234. });
  235.  
  236. addEvent(document, 'DOMContentLoaded', function() {
  237. 	init();
  238. });
  239. //================快捷键区============
  240. addEvent(window, 'keydown', function(e) {
  241. 	if (e.altKey && e.keyCode == 49) { //alt+1，向上滚动
  242. 		scroll(1);
  243. 	} else if (e.altKey && e.keyCode == 50) { //alt+2，向下滚动
  244. 		scroll(-1);
  245. 	} else if (e.ctrlKey && e.altKey) { //ctrl+alt,调出按钮
  246. 		marsMove("moveIn");
  247. 	} 
  248. });//监听keydown，快捷键
  249.  
  250. })(window,document);