☰

Add button for Smooth Scroll to the top / bottom

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

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

  1. // ==UserScript==
  2. // @name	Add button for Smooth Scroll to the top / bottom
  3. // @author	burningall
  4. // @description	为页面添加按钮，平滑的滚动到顶部/底部
  5. // @version     2015.6.4
  6. // @include		*
  7. // @grant       GM_addStyle
  8. // @supportURL		http://www.burningall.com
  9. // @contributionURL	troy450409405@gmail.com|alipay.com
  10. // @namespace https://greasyfork.org/zh-CN/users/3400-axetroy
  11. // ==/UserScript==
  12.  
  13. (function(){
  14. //================公共函数区============
  15. function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
  16. function getSize(obj) {return document.documentElement[obj]!=0 ? document.documentElement[obj]: document.body[obj];}
  17. function hasScroll() {return getSize('scrollHeight') > getSize('clientHeight') ? true : false;};
  18. function $(id) {return document.getElementById(id);}
  19. function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
  20. function doMove(obj, attr, dir, target, endFn) {
  21. 	dir = parseInt(getStyle(obj, attr)) < target ? dir: -dir;
  22. 	clearInterval(obj.timer);
  23. 	obj.timer = setInterval(function() {
  24. 		var speed = parseInt(getStyle(obj, attr)) + dir;
  25. 		if (speed > target && dir > 0 || speed < target && dir < 0) {
  26. 			speed = target;
  27. 		};
  28. 		obj.style[attr] = speed + "px";
  29. 		if (speed == target) {
  30. 			clearInterval(obj.timer);
  31. 			endFn && endFn();
  32. 		};
  33. 	},
  34. 	30);
  35. };
  36. //================样式区============
  37. var cssText='\
  38. #scrollMars-troy{\
  39. 	position:fixed;\
  40. 	right:30px;\
  41. 	z-index:9999999;\
  42. }\
  43. \
  44. #scrollMars-troy>div>div{\
  45. 	width:40px !important;\
  46. 	height:40px !important;\
  47. 	text-align:center !important;\
  48. 	padding:5px !important;\
  49. 	background:#303030 !important;\
  50. 	color:#fff !important;\
  51. 	display:block !important;\
  52. 	opacity:0.8 !important;\
  53. 	fitter:alpha(opacity:80) !important;\
  54. 	cursor:pointer !important;\
  55. 	border-radius:50% !important;\
  56. 	box-shadow:2px 2px 40px 2px #303030 !important;\
  57. 	line-height:40px !important;\
  58. 	font-size:35px !important;\
  59. 	font-style:inherit !important;\
  60. 	font-weight:bold !important;\
  61. 	font-family:"宋体" !important;\
  62. }\
  63. #scrollMars-troy>div>div:hover{\
  64. 	background:#FF0000 !important;\
  65. }\
  66. #mars-point{\
  67. 	width:100px !important;\
  68. 	height:100px !important;\
  69. 	position:absolute !important;\
  70. 	top:0 !important;\
  71. 	left:-40px !important;\
  72. }\
  73. '
  74. GM_addStyle(cssText);
  75. //================主要代码区============
  76. function moveMars(obj,index){
  77. 	if(index=='mouseout'){
  78. 		clearTimeout(obj.timerHover);
  79. 		obj.timerHover = setTimeout(function() {
  80. 			doMove(obj, "right", 5, -30);
  81. 		},
  82. 		3000);//鼠标离开后，3s隐藏到边栏	
  83. 		}else if(index=='mouseover'){
  84. 			clearTimeout(obj.timerHover);
  85. 			doMove(obj, "right", 5, 30);
  86. 		}
  87. }
  88. function scroll(obj,dir){//obj随意，dir>0往上滚，dir<0往下滚
  89. 	clearInterval(obj.timerScroll);
  90. 	obj.timerScroll=setInterval(function(){
  91. 		var position;
  92. 		var speed = (getSize('scrollTop') / 5) + 10;
  93. 		if(dir>0){//往上滚动
  94. 			position = getSize('scrollTop') - speed;
  95. 			if (position <= 0) {//如果滚到顶部
  96. 				document.body.scrollTop = document.documentElement.scrollTop = 0;
  97. 				clearInterval(obj.timerScroll);
  98. 				obj.timerScroll = null;
  99. 			}
  100. 		}else{//往下滚动
  101. 			position = getSize('scrollTop') + speed;
  102. 			if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
  103. 				document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
  104. 				clearInterval(obj.timerScroll);
  105. 				obj.timerScroll = null;
  106. 			}
  107. 		}
  108. 		document.body.scrollTop = document.documentElement.scrollTop = position;		
  109. 	},20)
  110. }
  111. function createBtn(){
  112. 	var jugg=$("scrollMars-troy");
  113. 	if(jugg && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
  114. 		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';//调整按钮位置
  115. 	}else if(jugg && hasScroll() == false){//如果没有滚动条，但是有按钮
  116. 		jugg.remove(jugg);//删除按钮
  117. 	};
  118. 	if (hasScroll() == false && !jugg) {//如果没有滚动条,并且没有按钮
  119. 		return false;
  120. 	}else if(hasScroll() == true && !jugg){//如果有滚动条，并且没有按钮
  121. 		var mars=document.createElement('div');
  122. 		mars.id="scrollMars-troy";
  123. 		window.top.document.documentElement.appendChild(mars);
  124. 		mars.innerHTML = "<div id='mars-point'></div><div><div id='goTop-troy'></div><div id='goBtn-troy'</div></div>";
  125. 		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';
  126. 		$("goTop-troy").innerHTML = "↑";
  127. 		$("goBtn-troy").innerHTML = "↓";
  128. 		addEvent($("goTop-troy"), "click",function() {scroll(mars,1)});
  129. 		addEvent($("goBtn-troy"), "click",function() {scroll(mars,-1)});
  130. 		addEvent($("mars-point"), "mouseover",function() {moveMars(mars,"mouseover")});
  131. 		addEvent($("mars-point"), "mouseout",function() {moveMars(mars,"mouseout")});
  132. 		addEvent(mars, "mouseover",function() {moveMars(mars,"mouseover")});
  133. 		addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';});
  134. 		moveMars(mars,"mouseout");//页面加载完成，默认3s后隐藏到边栏
  135. 	};
  136. };
  137. //================执行区============
  138. addEvent(window.top,"load",function(){createBtn()});
  139. addEvent(window.top, "resize",function(){createBtn()});
  140. })()