Add button for Smooth Scroll to the top / bottom

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

Устаревшая версия за 11.06.2015. Перейдите к последней версии.

  1. // ==UserScript==
  2. // @name Add button for Smooth Scroll to the top / bottom
  3. // @author burningall
  4. // @description 为页面添加按钮,平滑的滚动到顶部/底部
  5. // @version 2015.6.11
  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://greatest.deepsurf.us/zh-CN/users/3400-axetroy
  15. // ==/UserScript==
  16.  
  17. (function(){
  18. function checkList(){
  19. if( GM_getValue(window.top.location.host,'不在黑名单中')==window.top.location.host ){//如果该页面在黑名单中,则不执行
  20. console.log('该域名在黑名单中');
  21. return true;
  22. };
  23. };
  24. var d1=new Date().getTime()
  25. //================公共函数区============
  26. function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
  27. function getSize(obj) {return document.documentElement[obj]!=0 ? document.documentElement[obj]: document.body[obj];}
  28. function hasScroll() {return getSize('scrollHeight') > getSize('clientHeight') ? true : false;};
  29. function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
  30. function $(id) {return document.getElementById(id);}
  31. function doMove(obj, attr, dir, target, endFn) {
  32. dir = parseInt(getStyle(obj, attr)) < target ? dir: -dir;
  33. clearInterval(obj.timer);
  34. obj.timer = setInterval(function() {
  35. var speed = parseInt(getStyle(obj, attr)) + dir;
  36. if (speed > target && dir > 0 || speed < target && dir < 0) {
  37. speed = target;
  38. };
  39. obj.style[attr] = speed + "px";
  40. if (speed == target) {
  41. clearInterval(obj.timer);
  42. endFn && endFn();
  43. };
  44. },
  45. 30);
  46. };
  47. //================样式区============
  48. var cssText='\
  49. #scrollMars-troy{\
  50. position:fixed;\
  51. right:30px;\
  52. z-index:9999999;\
  53. }\
  54. \
  55. #scrollMars-troy>div>div{\
  56. width:40px !important;\
  57. height:40px !important;\
  58. text-align:center !important;\
  59. padding:5px !important;\
  60. background:#303030 !important;\
  61. color:#fff !important;\
  62. display:block !important;\
  63. opacity:0.8 !important;\
  64. fitter:alpha(opacity:80) !important;\
  65. cursor:pointer !important;\
  66. border-radius:50% !important;\
  67. box-shadow:2px 2px 40px 2px #303030 !important;\
  68. line-height:40px !important;\
  69. font-size:35px !important;\
  70. font-style:inherit !important;\
  71. font-weight:bold !important;\
  72. font-family:"宋体" !important;\
  73. }\
  74. #scrollMars-troy>div>div:hover{\
  75. background:#FF0000 !important;\
  76. }\
  77. #mars-point{\
  78. width:100px !important;\
  79. height:100px !important;\
  80. position:absolute !important;\
  81. top:0 !important;\
  82. left:-40px !important;\
  83. }\
  84. #setting-troy{\
  85. width: 300px !important;\
  86. height: auto !important;\
  87. border: 2px solid #303030 !important;\
  88. position: fixed !important;\
  89. top: 200px !important;\
  90. left: 33% !important;\
  91. color: #fff !important;\
  92. background: #303030 !important;\
  93. z-index:9999999999 !important;\
  94. }\
  95. #setting-troy>div{\
  96. margin: 20px !important;\
  97. }\
  98. #setting-troy>div input{\
  99. color:#fff !important;\
  100. background:#303030 !important;\
  101. padding:5px !important;\
  102. margin:5px !important;\
  103. }\
  104. #percent{\
  105. position:absolute !important;\
  106. top:42px !important;\
  107. left:-20px;\
  108. color:#147474 !important;\
  109. font-family:"微软雅黑" !important;\
  110. font-size:16px !important;\
  111. line-height:16px !important;\
  112. }\
  113. '
  114. GM_addStyle(cssText);
  115. //================主要代码区============
  116. GM_getValue("turn") ? GM_setValue("turn",true) : GM_setValue("turn",GM_getValue("turn"));
  117. function readmode(speed,inteval,endFn){
  118. if( GM_getValue("turn")==false ){
  119. return;
  120. }
  121. clearInterval(document.readMode)
  122. document.readMode=setInterval(function(){
  123. var position=getSize('scrollTop')+speed
  124. document.body.scrollTop = document.documentElement.scrollTop = position;
  125. clearTimeout(document.showPercent);
  126. var precent=parseInt( getSize('scrollTop') / ( getSize('scrollHeight')-getSize('clientHeight') ) * 100);
  127. $('percent').style.display="block";
  128. $('percent').innerHTML=precent+'%';
  129. if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
  130. clearInterval(document.readMode);
  131. $('percent').style.display="none";
  132. }
  133. },inteval)
  134. GM_setValue("turn",true);
  135. }
  136. function moveMars(obj,index){
  137. if(index=='mouseout'){
  138. clearTimeout(obj.timerHover);
  139. obj.timerHover = setTimeout(function() {
  140. doMove(obj, "right", 5, -30);
  141. },
  142. 3000);//鼠标离开后,3s隐藏到边栏
  143. }else if(index=='mouseover'){
  144. clearTimeout(obj.timerHover);
  145. doMove(obj, "right", 5, 30);
  146. }
  147. }
  148. function scroll(obj,dir){//obj随意,dir>0往上滚,dir<0往下滚
  149. clearInterval(obj.timerScroll);
  150. clearInterval(document.readMode);
  151. obj.timerScroll=setInterval(function(){
  152. var position;
  153. if(dir>0){//往上滚动
  154. var speed = (getSize('scrollTop') / 10) + 10;
  155. position = getSize('scrollTop') - speed;
  156. if (position <= 0) {//如果滚到顶部
  157. document.body.scrollTop = document.documentElement.scrollTop = 0;
  158. clearInterval(obj.timerScroll);
  159. }
  160. }else{//往下滚动
  161. var speed = ((getSize('scrollHeight')-getSize('scrollTop')) / 20) + 10;
  162. position = getSize('scrollTop') + speed;
  163. if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
  164. document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
  165. clearInterval(obj.timerScroll);
  166. }
  167. }
  168. document.body.scrollTop = document.documentElement.scrollTop = position;
  169. },20)
  170. }
  171.  
  172. function createBtn(){
  173. if(checkList()==true){
  174. return false;
  175. }
  176. var jugg=$("scrollMars-troy");
  177. if(jugg && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
  178. $('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';//调整按钮位置
  179. }else if(jugg && hasScroll() == false){//如果没有滚动条,但是有按钮
  180. jugg.remove(jugg);//删除按钮
  181. };
  182. if (hasScroll() == false && !jugg) {//如果没有滚动条,并且没有按钮
  183. return false;
  184. }else if(hasScroll() == true && !jugg){//如果有滚动条,并且没有按钮
  185. var mars=document.createElement('div');
  186. mars.id="scrollMars-troy";
  187. window.top.document.documentElement.appendChild(mars);
  188. 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>";
  189. $('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';
  190. $("goTop-troy").innerHTML = "↑";
  191. $("goBtn-troy").innerHTML = "↓";
  192. addEvent($("goTop-troy"), "click",function() {scroll(mars,1)});
  193. addEvent($("goBtn-troy"), "click",function() {scroll(mars,-1)});
  194. addEvent($("mars-point"), "mouseover",function() {moveMars(mars,"mouseover")});
  195. addEvent($("mars-point"), "mouseout",function() {moveMars(mars,"mouseout")});
  196. addEvent(mars, "mouseover",function() {moveMars(mars,"mouseover")});
  197. addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';});
  198. moveMars(mars,"mouseout");//页面加载完成,默认3s后隐藏到边栏
  199. };
  200. };
  201. //================执行区============
  202. addEvent(window,'mousewheel',function(){//滚动则停止,兼容chrome/ie/opera
  203. clearInterval($('scrollMars-troy').timerScroll);
  204. })
  205. addEvent(window,'DOMMouseScroll',function(){//滚动则停止,兼容firefox
  206. clearInterval($('scrollMars-troy').timerScroll);
  207. })
  208.  
  209. var isinput=false;//用于判断是否是点击到了特定元素上,如果是,就不进入阅读模式
  210. addEvent(document,'dblclick',function(){//双击进入阅读模式
  211. isinput==false && readmode(1,20);
  212. })
  213.  
  214. addEvent(document,'click',function(){//单击退出阅读模式,停止滚动
  215. clearInterval(document.readMode);
  216. $('percent').style.display="none";
  217. })
  218.  
  219. addEvent(window.top, "resize",function(){//页面大小改变,初始化按钮
  220. createBtn();
  221. });
  222.  
  223. addEvent(window.top,"load",function(){//页面加载,初始化按钮
  224. createBtn();
  225. //选择要禁用的元素(点击这些元素,不会进入阅读模式)
  226. var oInputs=document.querySelectorAll('input,form,textarea,#scrollMars-troy,.edui-editor-middle');
  227. for(var i=0;i<oInputs.length;i++){
  228. oInputs[i].ondblclick=function(){
  229. isinput=true;
  230. }
  231. addEvent(document,'dblclick',function(){
  232. isinput=false;
  233. })
  234. };
  235. var d2=new Date().getTime();
  236. console.log('GoTop-GoBtm脚本加载耗时:'+(d2-d1)+'ms');
  237. });
  238. //================快捷键区============
  239. addEvent(document,'keydown',function(e){
  240. e=e || window.top.event;
  241. if(e.ctrlKey && e.keyCode==38){//ctrl+↑,向上滚动
  242. scroll($('scrollMars-troy'),1)
  243. }else if(e.ctrlKey && e.keyCode==40){//ctrl+↓,向下滚动
  244. scroll($('scrollMars-troy'),-1)
  245. }else if(e.ctrlKey && e.keyCode==113){//ctrl+F2,调处控制面板
  246. $('setting-troy') && setting.remove(setting);
  247. var setting=document.createElement('div');
  248. setting.id='setting-troy';
  249. var inner="\
  250. <div id='setting-pan-troy'>\
  251. <div>\
  252. 控制面板:Ctrl+F2<br />\
  253. 添加黑名单域名:<input type='text' id='blackList' placeholder='www.baidu.com' /><br />\
  254. <input type='button' value='添加黑名单' id='saveSetting' />\
  255. <input type='button' id='quiet' value='退出面板' /><br/><hr />\
  256. <input type='button' id='clear' value='移除黑名单'>\
  257. <input type='button' id='showlist' value='显示黑名单'>\
  258. <input type='button' id='clearall' value='清空黑名单'>\
  259. <input type='button' id='readmodebtn' value='双击滚动开关'>\
  260. </div>\
  261. </div>\
  262. "
  263. window.top.document.documentElement.appendChild(setting);
  264. setting.innerHTML=inner;
  265. var domian=/^[0-9-a-z]+\.{0,1}[0-9-a-z]+\.{1}[a-z]+$/ig;//用于验证域名是否符合规范
  266. var host=window.top.location.host;
  267. $('blackList').value=host;
  268. //GM_setValue("turn",true);//第一次安装脚本,默认开启双击滚动
  269. addEvent($('quiet'),'click',function(){//退出
  270. setting.remove(setting);
  271. });
  272. addEvent($('clear'),'click',function(){//移出黑名单
  273. GM_deleteValue($('blackList').value);
  274. alert( GM_getValue($('blackList').value,'移除成功') );
  275. });
  276. addEvent($('clearall'),'click',function(){//清空黑名单
  277. for(var i=0;i<GM_listValues().length;i++){
  278. if(domian.test( GM_listValues()[i] )==true){
  279. console.log('黑名单:'+GM_listValues()[i]+'被删除');
  280. GM_deleteValue( GM_listValues()[i] );
  281. }
  282. };//for
  283. alert('清空完毕');
  284. })
  285. addEvent($('showlist'),'click',function(){//显示黑名单
  286. if(GM_listValues().length<=1){
  287. alert('空的黑名单');
  288. }
  289. for(var i=0;i<GM_listValues().length;i++){
  290. if(domian.test( GM_listValues()[i] )==true){
  291. var list=document.createElement('li');
  292. list.innerHTML=GM_listValues()[i];
  293. document.querySelector('#setting-pan-troy>div').appendChild(list);
  294. }
  295. }
  296. });
  297. addEvent($('readmodebtn'),'click',function(){//禁用双击滚动
  298. console.log(GM_getValue("turn"),"空的变量");
  299. if( GM_getValue("turn")==true ){
  300. GM_setValue("turn",false);
  301. alert('禁用成功');
  302. return;
  303. }else if(GM_getValue("turn")==false){
  304. GM_setValue("turn",true);
  305. alert('开启成功');
  306. return;
  307. }
  308. })
  309. addEvent($('saveSetting'),'click',function(){//保存
  310. if(domian.test($('blackList').value)==false){//检查输入的域名是否符合规范
  311. alert($('blackList').value+'域名格式不正确'+'\n比如:tieba.baidu.com或www.baidu.com')
  312. return;
  313. }
  314. if($('blackList').value!=''){//如果有填入黑名单列表
  315. if( GM_getValue($('blackList').value,'不存在这个黑名单')!=$('blackList').value ){//不在黑名单中
  316. GM_setValue($('blackList').value,$('blackList').value);
  317. alert('禁用:'+$('blackList').value+'成功');
  318. }else{
  319. alert('该域名已在黑名单中');
  320. }
  321. }else{//没有填入黑名单
  322. alert('请输入域名');
  323. return;
  324. }
  325. })
  326. }
  327. })//监听keydown,快捷键
  328. /*
  329. //清除GM脚本保存的所有变量;,调试时用,请不要开启
  330. function clearallGM_value(){
  331. for(var i=0;i<GM_listValues().length;i++){
  332. console.log('变量:'+GM_listValues()[i]+'被删除');
  333. GM_deleteValue( GM_listValues()[i] );
  334. };
  335. }
  336. clearallGM_value()
  337. */
  338. })()