Lite Add button for Smooth Scroll to the top / bottom

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

当前为 2015-06-10 提交的版本,查看 最新版本

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