☰

Add button for Smooth Scroll to the top / bottom

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

目前为 2015-06-05 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name	Add button for Smooth Scroll to the top / bottom
  3. // @author	burningall
  4. // @description	为页面添加按钮，平滑的滚动到顶部/底部
  5. // @version     2015.6.5.1
  6. // @include		*
  7. // @grant       GM_addStyle
  8. // @grant       GM_getValue
  9. // @grant       GM_setValue
  10. // @grant		GM_listValues
  11. // @grant		GM_deleteValue
  12. // @supportURL		http://www.burningall.com
  13. // @contributionURL	troy450409405@gmail.com|alipay.com
  14. // @namespace https://gf.qytechs.cn/zh-CN/users/3400-axetroy
  15. // ==/UserScript==
  16.  
  17. (function(){
  18. function checkList(){
  19. 	if( GM_getValue(window.top.location.host,'返回空字符串')==window.top.location.host ){//如果该页面在黑名单中，则不执行
  20. 		console.log('该域名在黑名单中')
  21. 		return true;
  22. 	};
  23. };
  24. var d1=new Date().getTime()
  25. //================公共函数区============
  26. function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
  27. function getSize(obj) {return document.documentElement[obj]!=0 ? document.documentElement[obj]: document.body[obj];}
  28. function hasScroll() {return getSize('scrollHeight') > getSize('clientHeight') ? true : false;};
  29. function $(id) {return document.getElementById(id);}
  30. function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
  31. function doMove(obj, attr, dir, target, endFn) {
  32. 	dir = parseInt(getStyle(obj, attr)) < target ? dir: -dir;
  33. 	clearInterval(obj.timer);
  34. 	obj.timer = setInterval(function() {
  35. 		var speed = parseInt(getStyle(obj, attr)) + dir;
  36. 		if (speed > target && dir > 0 || speed < target && dir < 0) {
  37. 			speed = target;
  38. 		};
  39. 		obj.style[attr] = speed + "px";
  40. 		if (speed == target) {
  41. 			clearInterval(obj.timer);
  42. 			endFn && endFn();
  43. 		};
  44. 	},
  45. 	30);
  46. };
  47. //================样式区============
  48. var cssText='\
  49. #scrollMars-troy{\
  50. 	position:fixed;\
  51. 	right:30px;\
  52. 	z-index:9999999;\
  53. }\
  54. \
  55. #scrollMars-troy>div>div{\
  56. 	width:40px !important;\
  57. 	height:40px !important;\
  58. 	text-align:center !important;\
  59. 	padding:5px !important;\
  60. 	background:#303030 !important;\
  61. 	color:#fff !important;\
  62. 	display:block !important;\
  63. 	opacity:0.8 !important;\
  64. 	fitter:alpha(opacity:80) !important;\
  65. 	cursor:pointer !important;\
  66. 	border-radius:50% !important;\
  67. 	box-shadow:2px 2px 40px 2px #303030 !important;\
  68. 	line-height:40px !important;\
  69. 	font-size:35px !important;\
  70. 	font-style:inherit !important;\
  71. 	font-weight:bold !important;\
  72. 	font-family:"宋体" !important;\
  73. }\
  74. #scrollMars-troy>div>div:hover{\
  75. 	background:#FF0000 !important;\
  76. }\
  77. #mars-point{\
  78. 	width:100px !important;\
  79. 	height:100px !important;\
  80. 	position:absolute !important;\
  81. 	top:0 !important;\
  82. 	left:-40px !important;\
  83. }\
  84. #setting-troy{\
  85. 	width: 300px !important;\
  86. 	height: auto !important;\
  87. 	border: 2px solid #303030 !important;\
  88. 	position: fixed !important;\
  89. 	top: 200px !important;\
  90. 	left: 33% !important;\
  91. 	color: #fff !important;\
  92. 	background: #303030 !important;\
  93. 	index:9999999999 !important;\
  94. }\
  95. #setting-troy>div{\
  96. 	margin: 20px !important;\
  97. }\
  98. #setting-troy>div input{\
  99. 	color:#fff !important;\
  100. 	background:#303030 !important;\
  101. 	padding:5px !important;\
  102. }\
  103. '
  104. GM_addStyle(cssText);
  105. //================主要代码区============
  106. function moveMars(obj,index){
  107. 	if(index=='mouseout'){
  108. 		clearTimeout(obj.timerHover);
  109. 		obj.timerHover = setTimeout(function() {
  110. 			doMove(obj, "right", 5, -30);
  111. 		},
  112. 		3000);//鼠标离开后，3s隐藏到边栏	
  113. 		}else if(index=='mouseover'){
  114. 			clearTimeout(obj.timerHover);
  115. 			doMove(obj, "right", 5, 30);
  116. 		}
  117. }
  118. function scroll(obj,dir){//obj随意，dir>0往上滚，dir<0往下滚
  119. 	clearInterval(obj.timerScroll);
  120. 	obj.timerScroll=setInterval(function(){
  121. 		var position;
  122. 		var speed = (getSize('scrollTop') / 5) + 10;
  123. 		if(dir>0){//往上滚动
  124. 			position = getSize('scrollTop') - speed;
  125. 			if (position <= 0) {//如果滚到顶部
  126. 				document.body.scrollTop = document.documentElement.scrollTop = 0;
  127. 				clearInterval(obj.timerScroll);
  128. 				obj.timerScroll = null;
  129. 			}
  130. 		}else{//往下滚动
  131. 			position = getSize('scrollTop') + speed;
  132. 			if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
  133. 				document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
  134. 				clearInterval(obj.timerScroll);
  135. 				obj.timerScroll = null;
  136. 			}
  137. 		}
  138. 		document.body.scrollTop = document.documentElement.scrollTop = position;		
  139. 	},20)
  140. }
  141. function createBtn(){
  142. 	if(checkList()==true){
  143. 		return false;
  144. 	}
  145. 	var jugg=$("scrollMars-troy");
  146. 	if(jugg && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
  147. 		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';//调整按钮位置
  148. 	}else if(jugg && hasScroll() == false){//如果没有滚动条，但是有按钮
  149. 		jugg.remove(jugg);//删除按钮
  150. 	};
  151. 	if (hasScroll() == false && !jugg) {//如果没有滚动条,并且没有按钮
  152. 		return false;
  153. 	}else if(hasScroll() == true && !jugg){//如果有滚动条，并且没有按钮
  154. 		var mars=document.createElement('div');
  155. 		mars.id="scrollMars-troy";
  156. 		window.top.document.documentElement.appendChild(mars);
  157. 		mars.innerHTML = "<div id='mars-point'></div><div><div id='goTop-troy' title='返回顶部'></div><div id='goBtn-troy' title='去到底部'></div></div>";
  158. 		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';
  159. 		$("goTop-troy").innerHTML = "↑";
  160. 		$("goBtn-troy").innerHTML = "↓";
  161. 		addEvent($("goTop-troy"), "click",function() {scroll(mars,1)});
  162. 		addEvent($("goBtn-troy"), "click",function() {scroll(mars,-1)});
  163. 		addEvent($("mars-point"), "mouseover",function() {moveMars(mars,"mouseover")});
  164. 		addEvent($("mars-point"), "mouseout",function() {moveMars(mars,"mouseout")});
  165. 		addEvent(mars, "mouseover",function() {moveMars(mars,"mouseover")});
  166. 		addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';});
  167. 		moveMars(mars,"mouseout");//页面加载完成，默认3s后隐藏到边栏
  168. 	};
  169. };
  170. //================执行区============
  171. addEvent(window.top,"load",function(){
  172. 	createBtn();
  173. 	var d2=new Date().getTime();
  174. 	console.log('GoTop-GoBtm脚本加载耗时：'+(d2-d1)+'ms');
  175. 	});
  176. addEvent(window.top, "resize",function(){createBtn()});
  177. addEvent(document,'keydown',function(e){//快捷键设置
  178. 	e=e || window.top.event;
  179. 	if(e.ctrlKey && e.keyCode==38){//ctrl+↑
  180. 		scroll($('scrollMars-troy'),1)
  181. 	}else if(e.ctrlKey && e.keyCode==40){//ctrl+↓
  182. 		scroll($('scrollMars-troy'),-1)
  183. 	}else if(e.ctrlKey && e.keyCode==113){//ctrl+F2
  184. 		var host=window.top.location.host;
  185. 		var setting=document.createElement('div');
  186. 		setting.id='setting-troy';
  187. 		var inner="\
  188. 			<div id='setting-pan-troy'>\
  189. 				<div>\
  190. 					控制面板:Ctrl+F2<br />\
  191. 					添加黑名单域名：<input type='text' id='blackList' placeholder='www.baidu.com' /><br />\
  192. 					<input type='button' value='添加黑名单' id='saveSetting' />\
  193. 					<input type='button' id='quiet' value='退出面板' /><br/>\
  194. 					<input type='button' id='clear' value='移除黑名单'>\
  195. 					<input type='button' id='showlist' value='显示黑名单'>\
  196. 					<input type='button' id='clearall' value='清空黑名单'>\
  197. 				</div>\
  198. 			</div>\
  199. 		"
  200. 		window.top.document.documentElement.appendChild(setting);
  201. 		setting.innerHTML=inner;
  202. 		addEvent($('quiet'),'click',function(){//退出
  203. 			setting.remove(setting);
  204. 		});
  205. 		addEvent($('clear'),'click',function(){//移出黑名单
  206. 			GM_deleteValue($('blackList').value);
  207. 			alert( GM_getValue($('blackList').value,'移除成功') ); 
  208. 		});
  209. 		addEvent($('clearall'),'click',function(){
  210. 			for(var i=0;i<GM_listValues().length;i++){
  211. 				console.log('黑名单：'+GM_listValues()[i])
  212. 				GM_deleteValue( GM_listValues()[i] )
  213. 			};
  214. 			alert('清空完毕')
  215. 		})
  216. 		addEvent($('showlist'),'click',function(){//显示黑名单
  217. 			for(var i=0;i<GM_listValues().length;i++){
  218. 				//console.log( '黑名单：'+GM_listValues()[i] );
  219. 				var list=document.createElement('li');
  220. 				list.innerHTML=GM_listValues()[i];
  221. 				document.querySelector('#setting-pan-troy>div').appendChild(list);
  222. 			}
  223. 		});
  224. 		$('blackList').value=host;
  225. 		addEvent($('saveSetting'),'click',function(){//保存
  226. 			var reg=/^[0-9a-z]+\.{0,1}[0-9a-z]+\.{1}[a-z]+$/ig
  227. 			if(reg.test(host)==false){//检查输入的域名是否符合规范
  228. 				alert($('blackList').value+'域名格式不正确'+'\n比如：tieba.baidu.com或www.baidu.com')
  229. 				return;
  230. 			}
  231. 			if($('blackList').value!=''){//如果有填入黑名单列表
  232. 				if( GM_getValue($('blackList').value,'不存在')!=$('blackList').value ){//不在黑名单中
  233. 					GM_setValue($('blackList').value,$('blackList').value);
  234. 					alert('禁用：'+$('blackList').value+'成功');
  235. 				}else{
  236. 					alert('该域名已在黑名单中')
  237. 				}
  238. 			}else{//没有填入黑名单
  239. 				alert('请输入黑名单');
  240. 				return;
  241. 			}
  242. 			//setting.remove(setting);
  243. 		})
  244. 	}
  245. })
  246. })()

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址