平滑的滚动到顶部/底部

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

当前为 2015-03-26 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name 平滑的滚动到顶部/底部
  3. // @author burningall
  4. // @description 为网页增加滚到顶部和底部按钮
  5. // @version 2015.3.26-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://greasyfork.org/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 doRotate(obj,dir,angle){
  30. clearInterval(obj.timerRotate);
  31. var speed = 0;
  32. function initial(){ //初始化
  33. obj.style.MozTransform = "rotate(0)"
  34. obj.style.WebkitTransform = "rotate(0)"
  35. obj.style.transform = "rotate(0)"
  36. };
  37. function letRo(){ //开始转动
  38. obj.style.MozTransform = "rotate("+ speed +"deg)"; //兼容firefox
  39. obj.style.WebkitTransform = "rotate("+ speed +"deg)"; //兼容chrme
  40. obj.style.transform = "rotate("+ speed +"deg)"; //兼容IE
  41. };
  42. obj.timerRotate=setInterval(function(){
  43. if(dir && dir<0){ //如过逆时针转
  44. speed = -speed;
  45. speed += parseInt(( Math.abs( speed/dir )+10 ) );
  46. speed = -speed;
  47. }else{ //如果顺时针转
  48. speed += parseInt( Math.abs( speed/dir+10 ) );
  49. };
  50. letRo();
  51. if(angle && Math.abs(speed)>=angle){ //如过转到目标点
  52. initial();
  53. clearInterval(obj.timerRotate)
  54. }else if(!angle && Math.abs(speed)>=360){ //无限旋转时,转一圈清零,防止数字越来越大。
  55. speed = 0;
  56. speed += (speed/dir)+num;
  57. initial();
  58. letRo();
  59. };
  60. },30)
  61. };
  62. function $(id) {
  63. return document.getElementById(id);
  64. }
  65. function getStyle(obj, attr) {
  66. return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
  67. }
  68. function getScrollTop() {
  69. return document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop;
  70. }
  71. function getClientHeight() {
  72. return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;
  73. }
  74. function createElement(tagName, idName, styleList, appendPosition, endFn) {
  75. var newElement = document.createElement(tagName);
  76. newElement.id = idName;
  77. newElement.style.cssText = styleList;
  78. appendPosition && appendPosition.appendChild(newElement);
  79. endFn && endFn();
  80. }
  81. function doMove(obj, attr, dir, target, endFn) {
  82. dir = parseInt(getStyle(obj, attr)) < target ? dir: -dir;
  83. clearInterval(obj.timer);
  84. obj.timer = setInterval(function() {
  85. var speed = parseInt(getStyle(obj, attr)) + dir;
  86. if (speed > target && dir > 0 || speed < target && dir < 0) {
  87. speed = target;
  88. }
  89. obj.style[attr] = speed + "px";
  90. if (speed == target) {
  91. clearInterval(obj.timer);
  92. endFn && endFn();
  93. }
  94. },
  95. 30);
  96. }
  97. createElement("div", "scrollMars-troy", "width:100px;height:120px;position:fixed;right:20px;z-index:9999;", document.documentElement);
  98. $("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>";
  99. 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";
  100. $('scrollMars-troy').style.top=(getClientHeight()/3)+'px';
  101. $("goTop-troy").style.cssText = scrollStyle;
  102. $("goBtn-troy").style.cssText = scrollStyle;
  103. $("goTop-troy").innerHTML = "顶<br/>部";
  104. $("goBtn-troy").innerHTML = "底<br/>部";
  105. addEvent($("goTop-troy"), "click",
  106. function() {
  107. doRotate($("goTop-troy"),50,720);
  108. clearInterval($("goTop-troy").timerScroll);
  109. $("goTop-troy").timerScroll = setInterval(function() {
  110. var speed = (getScrollTop() / 5) + 10;
  111. position = getScrollTop() - speed;
  112. if (position <= 0) {
  113. document.body.scrollTop = document.documentElement.scrollTop = 0;
  114. clearInterval($("goTop-troy").timerScroll);
  115. $("goTop-troy").timerScroll = null;
  116. }
  117. document.body.scrollTop = document.documentElement.scrollTop = position;
  118. },
  119. 30);
  120. });
  121. addEvent($("goBtn-troy"), "click",
  122. function() {
  123. doRotate($("goBtn-troy"),-50,720);
  124. clearInterval($("goTop-troy").timerScroll);
  125. $("goTop-troy").timerScroll = setInterval(function() {
  126. var speed = (getScrollTop() / 5) + 10;
  127. position = getScrollTop() + speed;
  128. if (position + getClientHeight() >= getScrollHeight()) {
  129. document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
  130. clearInterval($("goTop-troy").timerScroll);
  131. $("goTop-troy").timerScroll = null;
  132. }
  133. document.body.scrollTop = document.documentElement.scrollTop = position;
  134. },
  135. 30);
  136. });
  137. addEvent($("scrollMars-troy"), "mouseover",
  138. function() {
  139. clearTimeout($("scrollMars-troy").timerHover);
  140. doMove($("scrollMars-troy"), "right", 10, 20,
  141. function() {
  142. doMove($("scrollMars-troy"), "width", 20, 100);
  143. });
  144. });
  145. addEvent($("scrollMars-troy"), "mouseout",
  146. function() {
  147. clearTimeout($("scrollMars-troy").timerHover);
  148. $("scrollMars-troy").timerHover = setTimeout(function() {
  149. doMove($("scrollMars-troy"), "right", 10, -80,
  150. function() {
  151. doMove($("scrollMars-troy"), "width", 20, 160);
  152. });
  153. },
  154. 3000);
  155. });
  156. addEvent($("goTop-troy"), "mouseover",
  157. function() {
  158. $("goTop-troy").style.background = "#FF0004";
  159. });
  160. addEvent($("goTop-troy"), "mouseout",
  161. function() {
  162. $("goTop-troy").style.background = "#303030";
  163. });
  164. addEvent($("goBtn-troy"), "mouseover",
  165. function() {
  166. $("goBtn-troy").style.background = "#FF0004";
  167. });
  168. addEvent($("goBtn-troy"), "mouseout",
  169. function() {
  170. $("goBtn-troy").style.background = "#303030";
  171. });
  172. };
  173. }));