☰

平滑的滚动到顶部/底部

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

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

  1. // ==UserScript==
  2. // @name	平滑的滚动到顶部/底部
  3. // @author	burningall
  4. // @description	为网页增加滚到顶部和底部按钮
  5. // @version     2015.3.24-1.4
  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;top:200px", 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.7;fitter:alpha(opacity:80);cursor:pointer;border-radius:50%;box-shadow:2px 2px 40px 2px #303030;font-size:16px;z-index:9999";
  67. 		$("goTop-troy").style.cssText = scrollStyle;
  68. 		$("goBtn-troy").style.cssText = scrollStyle;
  69. 		$("goTop-troy").innerHTML = "顶<br/>部";
  70. 		$("goBtn-troy").innerHTML = "底<br/>部";
  71. 		addEvent($("goTop-troy"), "click",
  72. 		function() {
  73. 			clearInterval($("goTop-troy").timer);
  74. 			$("goTop-troy").timer = setInterval(function() {
  75. 				var speed = (getScrollTop() / 5) + 10;
  76. 				position = getScrollTop() - speed;
  77. 				if (position <= 0) {
  78. 					document.body.scrollTop = document.documentElement.scrollTop = 0;
  79. 					clearInterval($("goTop-troy").timer);
  80. 					$("goTop-troy").timer = null;
  81. 				}
  82. 				document.body.scrollTop = document.documentElement.scrollTop = position;
  83. 			},
  84. 			30);
  85. 		});
  86. 		addEvent($("goBtn-troy"), "click",
  87. 		function() {
  88. 			clearInterval($("goTop-troy").timer);
  89. 			$("goTop-troy").timer = setInterval(function() {
  90. 				var speed = (getScrollTop() / 5) + 10;
  91. 				position = getScrollTop() + speed;
  92. 				if (position + getClientHeight() >= getScrollHeight()) {
  93. 					document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
  94. 					clearInterval($("goTop-troy").timer);
  95. 					$("goTop-troy").timer = null;
  96. 				}
  97. 				document.body.scrollTop = document.documentElement.scrollTop = position;
  98. 			},
  99. 			30);
  100. 		});
  101. 		addEvent($("scrollMars-troy"), "mouseover",
  102. 		function() {
  103. 			clearTimeout($("scrollMars-troy").timerMove);
  104. 			doMove($("scrollMars-troy"), "right", 10, 20,
  105. 			function() {
  106. 				doMove($("scrollMars-troy"), "width", 20, 100);
  107. 			});
  108. 		});
  109. 		addEvent($("scrollMars-troy"), "mouseout",
  110. 		function() {
  111. 			clearTimeout($("scrollMars-troy").timerMove);
  112. 			$("scrollMars-troy").timerMove = setTimeout(function() {
  113. 				doMove($("scrollMars-troy"), "right", 10, -80,
  114. 				function() {
  115. 					doMove($("scrollMars-troy"), "width", 20, 160);
  116. 				});
  117. 			},
  118. 			3000);
  119. 		});
  120. 		addEvent($("goTop-troy"), "mouseover",
  121. 		function() {
  122. 			$("goTop-troy").style.background = "#FF0004";
  123. 		});
  124. 		addEvent($("goTop-troy"), "mouseout",
  125. 		function() {
  126. 			$("goTop-troy").style.background = "#303030";
  127. 		});
  128. 		addEvent($("goBtn-troy"), "mouseover",
  129. 		function() {
  130. 			$("goBtn-troy").style.background = "#FF0004";
  131. 		});
  132. 		addEvent($("goBtn-troy"), "mouseout",
  133. 		function() {
  134. 			$("goBtn-troy").style.background = "#303030";
  135. 		});
  136. 	};
  137. }));