🏠 Home　

全局上下滚动按钮

全局上下滚动按钮 (无需Jquery)


安装此脚本? 
  1. // ==UserScript==
  2. // @name 全局上下滚动按钮
  3. // @namespace    http://tampermonkey.net/
  4. // @description 全局上下滚动按钮 (无需Jquery)
  5. // @version 0.2
  6. // @author lnwazg
  7. // @include *
  8. // @run-at document-end
  9. // @grant none
  10. // ==/UserScript==
  11. // [1] skip all iframe
  12. if (window.self!=window.top) {return}
  13. // create element
  14. function ce(n) { return document.createElement(n); } // end of function
  15. // add style
  16. function addStyle(css) {
  17. var head = document.head || document.getElementsByTagName('head')[0];
  18. if (head) {
  19. var style = ce("style");
  20. style.type = "text/css";
  21. style.appendChild(document.createTextNode(css));
  22. head.appendChild(style);
  23. } // end if
  24. } // end of function
  25. // global variables
  26. var position,
  27. // figure out if this is moz || IE because they use documentElement
  28. el = (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('MSIE') != -1) ? document.documentElement : document.body,
  29. // timer
  30. t1, t2,
  31. // speed by
  32. speed_by_click = 500, // edit this value
  33. speed_by_over = 10,  // edit this value
  34. // z-index
  35. zIindex = 1001;       // edit this value
  36. // move up
  37. function move_up() {
  38. position = document.documentElement.scrollTop || document.body.scrollTop;
  39. window.scrollTo(0, position-1);
  40. t1 = setTimeout(move_up, speed_by_over);
  41. } // end of function
  42. // move downn
  43. function move_dn() {
  44. position = document.documentElement.scrollTop || document.body.scrollTop;
  45. window.scrollTo(0, position+1);
  46. t2 = setTimeout(move_dn, speed_by_over);
  47. } // end of function
  48. // document height
  49. function getDocumentHeight() {
  50. return (document.body.scrollHeight > document.body.offsetHeight)?document.body.scrollHeight:document.body.offsetHeight;
  51. } // end of function
  52. // document scroll
  53. function get_scroll(a) {
  54. var d = document,
  55. b = d.body,
  56. e = d.documentElement,
  57. c = "client" + a,
  58. a = "scroll" + a;
  59. return /CSS/.test(d.compatMode)? (e[c]< e[a]) : (b[c]< b[a])
  60. } // end of function
  61. // calk
  62. function scrollTo(element, to, duration) {
  63. var start = element.scrollTop,
  64. change = to - start,
  65. currentTime = 0,
  66. increment = 20,
  67. newDuration = (typeof(duration) === 'undefined') ? 500: duration;
  68. var animateScroll = function(){
  69. currentTime += increment;
  70. var val = Math.easeInOutQuad(currentTime, start, change, newDuration);
  71. element.scrollTop = val;
  72. if(currentTime < newDuration) { setTimeout(animateScroll, increment); }
  73. };
  74. animateScroll();
  75. } // end of function
  76. //t = current time
  77. //b = start value
  78. //c = change in value
  79. //d = duration
  80. Math.easeInOutQuad = function (t, b, c, d) {
  81. t /= d/2;
  82. if (t < 1) return c/2*t*t + b;
  83. t--;
  84. return -c/2 * (t*(t-2) - 1) + b;
  85. };
  86. // add css
  87. function shareCSS(){
  88. // variables
  89. var s='', img_up, img_dn;
  90. // img vs button
  91. img_up = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB+SURBVDhPY1i1atV/amAGahgCMoNhaIGlS5cKAp19BoRBbLJcj2QILDJINwzoAmMgfoclIkBixkS5DI8hMJcRNgxoSBoOl6CnNZBhaVhdBjWE1MSJahjQkA4KEmYH2GUrV66cSYEhYB+AzKBtFiHkQqKiH6Ro1CDCQTWgYQQAs81DU0G/83sAAAAASUVORK5CYII=';
  92. img_dn = 'data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACPSURBVDhPY2DAAlatWvUfH8amB6vYqEGEg2pgw4iQ7cTKM6xcuXImsYpxqQOZAQ4woIIOCgzrQAl1oEFpZBiWhitFgwx7R4SBIDXYDYGZDFRgTMAwkCHGhBMRJMxwGUa8ITCbli5dKgg08AySN8+AxIhyCboiJMPIN4Qsm6miiYioxltawvSDYogohYTUAQC80UNTOht/YwAAAABJRU5ErkJggg==';
  93. // button id
  94. s+='#play_btn_up { position:fixed; right:0; bottom:53%;z-index:'+zIindex+'; height:36px; width:36px; cursor:pointer; background:url('+img_up+') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 0 0 5px; margin-top:-24px; }';
  95. s+='#play_btn_dn { position:fixed; right:0; top:53%;   z-index:'+zIindex+'; height:36px; width:36px; cursor:pointer; background:url('+img_dn+') no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 0 0 5px; margin-top:-24px; }';
  96. // button class
  97. s+='.play_btn { -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.65; }';
  98. s+='.play_btn:hover { opacity:1; }';
  99. // append
  100. addStyle(''+s);
  101. } // end of function
  102. // main
  103. function create_btn_element() {
  104. // get scroll
  105. var up, dn,
  106. scrolled,
  107. h = get_scroll('Height');
  108. // exit
  109. if(!h) { return; } // end if
  110. // add css
  111. shareCSS();
  112. // if
  113. if(el){
  114. // create DOM element
  115. up = ce('span');
  116. dn = ce('span');
  117. // set attribute
  118. up.setAttribute('id','play_btn_up');
  119. dn.setAttribute('id','play_btn_dn');
  120. // set class
  121. up.className = "play_btn";
  122. dn.className = "play_btn";
  123. // append element
  124. document.body.appendChild(up);
  125. document.body.appendChild(dn);
  126. // scroll
  127. scrolled = window.pageYOffset || document.documentElement.scrollTop;
  128. // if scroll
  129. up.style.display = (scrolled > 0)  ? "" : "none";
  130. // add event over
  131. up.addEventListener('mouseover', move_up, false);
  132. dn.addEventListener('mouseover', move_dn, false);
  133. // add event out
  134. up.addEventListener('mouseout', function(){clearTimeout(t1);},false);
  135. dn.addEventListener('mouseout', function(){clearTimeout(t2);},false);
  136. // add event click
  137. up.addEventListener('click', function(){ scrollTo(el, 0, speed_by_click); }, false);
  138. dn.addEventListener('click', function(){ scrollTo(el, getDocumentHeight(), speed_by_click); }, false);
  139. // add event scroll
  140. window.onscroll = function() {
  141. var scrolled = window.pageYOffset || document.documentElement.scrollTop, diffHeight = document.body.scrollHeight - window.innerHeight;
  142. // if scroll up
  143. up.style.display = (scrolled > 0)  ? "" : "none";
  144. // if scroll dn
  145. dn.style.display = (diffHeight > scrolled)  ? "" : "none";
  146. }; // end of function
  147. } // end if
  148. } // end of function
  149. // run it
  150. create_btn_element();