☰

平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮

As of 2015-04-03. See the latest version.

  1. // ==UserScript==
  2. // @name	平滑的滚动到顶部/底部
  3. // @author	burningall
  4. // @description	为网页增加滚到顶部和底部按钮
  5. // @version     2015.4.3-1.0
  6. // @include			http://*
  7. // @include			https://*
  8. // @include			ftp://*
  9. // @supportURL		http://www.burningall.com
  10. // @contributionURL	troy450409405@gmail.com|alipay.com
  11. // @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy
  12. // ==/UserScript==
  13.  
  14. function addEvent(obj, event, fn) {
  15. 	return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);
  16. };
  17. function getScrollHeight() {
  18. 	return document.body ? bodyScrollHeight = document.body.scrollHeight: document.documentElement.scrollHeight;
  19. };
  20. function getClientHeight() {
  21. 	return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;
  22. };
  23. function hasScroll() {
  24. 	var hasScroll;
  25. 	return getScrollHeight() > getClientHeight() ? hasScroll = 1 : hasScroll = 0;
  26. }; (addEvent(window.top, "load",
  27. function() {
  28. 	if (hasScroll() == 1) {
  29. 		function $(id) {
  30. 			return document.getElementById(id);
  31. 		}
  32. 		function getStyle(obj, attr) {
  33. 			return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
  34. 		}
  35. 		function getScrollTop() {
  36. 			return document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop;
  37. 		}
  38. 		function getClientHeight() {
  39. 			return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;
  40. 		}
  41. 		function createElement(tagName, idName, styleList, appendPosition, endFn) {
  42. 			var newElement = document.createElement(tagName);
  43. 			newElement.id = idName;
  44. 			newElement.style.cssText = styleList;
  45. 			appendPosition && appendPosition.appendChild(newElement);
  46. 			endFn && endFn();
  47. 		}
  48. 		function doMove(obj, attr, dir, target, endFn) {
  49. 			dir = parseInt(getStyle(obj, attr)) < target ? dir: -dir;
  50. 			clearInterval(obj.timer);
  51. 			obj.timer = setInterval(function() {
  52. 				var speed = parseInt(getStyle(obj, attr)) + dir;
  53. 				if (speed > target && dir > 0 || speed < target && dir < 0) {
  54. 					speed = target;
  55. 				}
  56. 				obj.style[attr] = speed + "px";
  57. 				if (speed == target) {
  58. 					clearInterval(obj.timer);
  59. 					endFn && endFn();
  60. 				}
  61. 			},
  62. 			30);
  63. 		}
  64. 		createElement("div", "scrollMars-troy", "width:100px;height:120px;position:fixed;right:20px;z-index:9999;", document.documentElement);
  65. 		$("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>";
  66. 		var scrollStyle = "width:40px;height:40px;text-align:center;padding:5px;margin:5px auto;background:#303030;color:#fff;display:block;opacity:0.8;fitter:alpha(opacity:80);cursor:pointer;border-radius:50%;box-shadow:2px 2px 40px 2px #303030;font-size:16px;z-index:9999";
  67. 		$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';
  68. 		$("goTop-troy").style.cssText = scrollStyle;
  69. 		$("goBtn-troy").style.cssText = scrollStyle;
  70. 		$("goTop-troy").innerHTML = "顶<br/>部";
  71. 		$("goBtn-troy").innerHTML = "底<br/>部";
  72. 		addEvent($("goTop-troy"), "click",
  73. 		function() {
  74. 			clearInterval($("goTop-troy").timerScroll);
  75. 			$("goTop-troy").timerScroll = setInterval(function() {
  76. 				var speed = (getScrollTop() / 5) + 10;
  77. 				position = getScrollTop() - speed;
  78. 				if (position <= 0) {
  79. 					document.body.scrollTop = document.documentElement.scrollTop = 0;
  80. 					clearInterval($("goTop-troy").timerScroll);
  81. 					$("goTop-troy").timerScroll = null;
  82. 				}
  83. 				document.body.scrollTop = document.documentElement.scrollTop = position;
  84. 			},
  85. 			30);
  86. 		});
  87. 		addEvent($("goBtn-troy"), "click",
  88. 		function() {
  89. 			clearInterval($("goTop-troy").timerScroll);
  90. 			$("goTop-troy").timerScroll = setInterval(function() {
  91. 				var speed = (getScrollTop() / 5) + 10;
  92. 				position = getScrollTop() + speed;
  93. 				if (position + getClientHeight() >= getScrollHeight()) {
  94. 					document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
  95. 					clearInterval($("goTop-troy").timerScroll);
  96. 					$("goTop-troy").timerScroll = null;
  97. 				}
  98. 				document.body.scrollTop = document.documentElement.scrollTop = position;
  99. 			},
  100. 			30);
  101. 		});
  102. 		addEvent($("scrollMars-troy"), "mouseover",
  103. 		function() {
  104. 			clearTimeout($("scrollMars-troy").timerHover);
  105. 			doMove($("scrollMars-troy"), "right", 10, 20,
  106. 			function() {
  107. 				doMove($("scrollMars-troy"), "width", 20, 100);
  108. 			});
  109. 		});
  110. 		addEvent($("scrollMars-troy"), "mouseout",
  111. 		function() {
  112. 			clearTimeout($("scrollMars-troy").timerHover);
  113. 			$("scrollMars-troy").timerHover = setTimeout(function() {
  114. 				doMove($("scrollMars-troy"), "right", 10, -80,
  115. 				function() {
  116. 					doMove($("scrollMars-troy"), "width", 20, 160);
  117. 				});
  118. 			},
  119. 			3000);
  120. 		});
  121. 		addEvent($("goTop-troy"), "mouseover",
  122. 		function() {
  123. 			$("goTop-troy").style.background = "#FF0004";
  124. 		});
  125. 		addEvent($("goTop-troy"), "mouseout",
  126. 		function() {
  127. 			$("goTop-troy").style.background = "#303030";
  128. 		});
  129. 		addEvent($("goBtn-troy"), "mouseover",
  130. 		function() {
  131. 			$("goBtn-troy").style.background = "#FF0004";
  132. 		});
  133. 		addEvent($("goBtn-troy"), "mouseout",
  134. 		function() {
  135. 			$("goBtn-troy").style.background = "#303030";
  136. 		});
  137. 	};
  138. }));