TopAndDownButtonsEverywhere

Top and Down buttons everywhere

  1. // ==UserScript==
  2. // @name TopAndDownButtonsEverywhere
  3. // @namespace https://greasyfork.org/en/users/28298
  4. // @description Top and Down buttons everywhere
  5. // @version 1.71
  6. // @author 2018++ Jerry, 2018+ Volkan K., 2014-2016 Max Max
  7. // @license GPL-3.0-or-later; http://www.gnu.org/licenses/gpl-3.0.txt
  8. // @include *
  9. // @run-at document-end
  10. // @grant unsafeWindow
  11. // @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  12. // @require https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js
  13. // ==/UserScript==
  14.  
  15. var RANDOM=Math.floor(Math.random()*1234567890);
  16.  
  17. // [1] skip all iframe
  18. if (window.self != window.top) {
  19. return
  20. }
  21.  
  22. // create element
  23. function ce(n) {
  24. return $('<' + n + '>')[0];
  25. } // end of function
  26.  
  27. // add style
  28. function addStyle(css) {
  29. var head = $('head')[0];
  30. if (head) {
  31. var style = ce("style");
  32. style.type = "text/css";
  33. style.appendChild(document.createTextNode(css));
  34. head.appendChild(style);
  35. } // end if
  36. } // end of function
  37.  
  38. // global variables
  39. var position,
  40. // figure out if this is moz || IE because they use documentElement
  41. el = document.documentElement || document.body,
  42. // timer
  43. t1, t2,
  44. // speed by
  45. speed_by_click = 500, // edit this value
  46. speed_by_over = 100, // edit this value
  47. // z-index
  48. zIindex = 1001; // edit this value
  49.  
  50. // move up
  51. function move_up() {
  52. position = document.documentElement.scrollTop || document.body.scrollTop;
  53. window.scrollTo(0, position - 1);
  54. t1 = setTimeout(move_up, speed_by_over);
  55. } // end of function
  56.  
  57. // move downn
  58. function move_dn() {
  59. position = document.documentElement.scrollTop || document.body.scrollTop;
  60. window.scrollTo(0, position + 1);
  61. t2 = setTimeout(move_dn, speed_by_over);
  62. } // end of function
  63.  
  64. function goto_up () {
  65. scrollTo(el, 0, speed_by_click);
  66. }
  67.  
  68. function goto_dn () {
  69. scrollTo(el, getDocumentHeight(), speed_by_click);
  70. }
  71.  
  72. // document height
  73. function getDocumentHeight() {
  74. var body = $('body')[0];
  75. return (body.scrollHeight > body.offsetHeight) ? body.scrollHeight : body.offsetHeight;
  76. } // end of function
  77.  
  78. // document scroll
  79. function get_scroll(a) {
  80. var d = document,
  81. b = d.body,
  82. e = d.documentElement,
  83. c = "client" + a,
  84. a = "scroll" + a;
  85. return /CSS/.test(d.compatMode) ? (e[c] < e[a]) : (b[c] < b[a])
  86. } // end of function
  87.  
  88. function scrollTo(element, to, duration) {
  89. return $(element).scrollTo(to,duration);
  90. }
  91.  
  92. // add css
  93. function shareCSS() {
  94. // variables
  95. var s = '',
  96. img_up, img_dn;
  97.  
  98. // img vs button
  99. img_up = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB+SURBVDhPY1i1atV/amAGahgCMoNhaIGlS5cKAp19BoRBbLJcj2QILDJINwzoAmMgfoclIkBixkS5DI8hMJcRNgxoSBoOl6CnNZBhaVhdBjWE1MSJahjQkA4KEmYH2GUrV66cSYEhYB+AzKBtFiHkQqKiH6Ro1CDCQTWgYQQAs81DU0G/83sAAAAASUVORK5CYII=';
  100. img_dn = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVDhPY2DAAlatWvUfH8amB6vYqEGEg2pgw4iQ7cTKM6xcuXImsYpxqQOZAQ4woIIOCgzrQAl1oEFpZBiWhitFgwx7R4SBIDXYDYGZDFRgTMAwkCHGhBMRJMxwGUa8ITCbli5dKgg08AySN8+AxIhyCboiJMPIN4Qsm6miiYioxltawvSDYogohYTUAQC80UNTOht/YwAAAABJRU5ErkJggg==';
  101. // button id
  102. s += '#play_btn_up'+RANDOM+' { position:fixed; right:45%; bottom:90%;z-index:' + zIindex + '; height:50px; width:10%; cursor:pointer; background:url(' + img_up + ') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 5px 5px 5px; margin-top:-24px; }';
  103. s += '#play_btn_dn'+RANDOM+' { position:fixed; right:45%; top:90%; z-index:' + zIindex + '; height:50px; width:10%; cursor:pointer; background:url(' + img_dn + ') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 5px 5px 5px; margin-top:-24px; }';
  104. // button class
  105. s += '.play_btn'+RANDOM+' { -webkit-transition-duration:0.5s linear; -o-transition-duration:0.5s linear; -moz-transition-duration:0.5s linear; transition-duration:0.5s linear; opacity:0.01; }';
  106. s += '.play_btn'+RANDOM+':hover { opacity:1; }';
  107. // append
  108. addStyle('' + s);
  109. } // end of function
  110.  
  111. // main
  112. function create_btn_element() {
  113. // get scroll
  114. var up, dn,
  115. scrolled,
  116. h = get_scroll('Height');
  117. // exit
  118. if (!h) {
  119. return;
  120. } // end if
  121.  
  122. // add css
  123. shareCSS();
  124.  
  125. // if
  126. if (el) {
  127. // create DOM element
  128. up = ce('span');
  129. dn = ce('span');
  130. // set attribute
  131. up.setAttribute('id', 'play_btn_up'+RANDOM);
  132. dn.setAttribute('id', 'play_btn_dn'+RANDOM);
  133. // set class
  134. up.className = "play_btn"+RANDOM;
  135. dn.className = "play_btn"+RANDOM;
  136. // append element
  137. document.body.appendChild(up);
  138. document.body.appendChild(dn);
  139.  
  140. // scroll
  141. scrolled = window.pageYOffset || document.documentElement.scrollTop;
  142. // if scroll
  143. up.style.display = (scrolled > 0) ? "" : "none";
  144.  
  145. // add event over
  146. up.addEventListener('mouseover', move_up, false);
  147. dn.addEventListener('mouseover', move_dn, false);
  148. // add event out
  149. up.addEventListener('mouseout', function() {
  150. clearTimeout(t1);
  151. }, false);
  152. dn.addEventListener('mouseout', function() {
  153. clearTimeout(t2);
  154. }, false);
  155. // add event click
  156. up.addEventListener('click', goto_up, false);
  157. dn.addEventListener('click', goto_dn, false);
  158.  
  159. // add event scroll
  160. window.onscroll = function() {
  161. var scrolled = window.pageYOffset || document.documentElement.scrollTop,
  162. diffHeight = document.body.scrollHeight - window.innerHeight;
  163. // if scroll up
  164. up.style.display = (scrolled > 0) ? "" : "none";
  165. // if scroll dn
  166. dn.style.display = (diffHeight > scrolled) ? "" : "none";
  167. }; // end of function
  168. } // end if
  169. } // end of function
  170.  
  171. // run it
  172. create_btn_element();
  173.