Add button for Smooth Scroll to the top / bottom

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

当前为 2015-05-23 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Add button for Smooth Scroll to the top / bottom
  3. // @author burningall
  4. // @description 为页面添加按钮,平滑的滚动到顶部/底部
  5. // @version 2015.5.25
  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://gf.qytechs.cn/zh-CN/users/3400-axetroy
  12. // ==/UserScript==
  13.  
  14. (function(){
  15. //================公共函数区============
  16. function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
  17. function getScrollHeight() {return document.body ? bodyScrollHeight = document.body.scrollHeight: document.documentElement.scrollHeight;};
  18. function getClientHeight() {return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;};
  19. function hasScroll() {return getScrollHeight() > getClientHeight() ? true : false;};
  20. function $(id) {return document.getElementById(id);}
  21. function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
  22. function getScrollTop() {return document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop;}
  23. function getClientHeight() {return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;}
  24. function createElement(tagName, idName, styleList, appendPosition, endFn) {
  25. var newElement = document.createElement(tagName);
  26. newElement.id = idName;
  27. newElement.style.cssText = styleList;
  28. appendPosition && appendPosition.appendChild(newElement);
  29. endFn && endFn();
  30. }
  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. function movein(){
  48. clearTimeout($("scrollMars-troy").timerHover);
  49. doMove($("scrollMars-troy"), "right", 10, 20,function() {
  50. doMove($("scrollMars-troy"), "width", 20, 100);
  51. });
  52. };
  53. function moveout(){
  54. clearTimeout($("scrollMars-troy").timerHover);
  55. $("scrollMars-troy").timerHover = setTimeout(function() {
  56. doMove($("scrollMars-troy"), "right", 10, -80,function() {
  57. doMove($("scrollMars-troy"), "width", 20, 160);
  58. });
  59. },
  60. 3000);//鼠标离开后,3s隐藏到边栏
  61. };
  62. function scrollTop(){
  63. clearInterval($("goTop-troy").timerScroll);
  64. $("goTop-troy").timerScroll = setInterval(function() {
  65. var speed = (getScrollTop() / 5) + 10;
  66. position = getScrollTop() - speed;
  67. if (position <= 0) {
  68. document.body.scrollTop = document.documentElement.scrollTop = 0;
  69. clearInterval($("goTop-troy").timerScroll);
  70. $("goTop-troy").timerScroll = null;
  71. }
  72. document.body.scrollTop = document.documentElement.scrollTop = position;
  73. },
  74. 30);
  75. };
  76. function scrollBtn(){
  77. clearInterval($("goTop-troy").timerScroll);
  78. $("goTop-troy").timerScroll = setInterval(function() {
  79. var speed = (getScrollTop() / 5) + 10;
  80. position = getScrollTop() + speed;
  81. if (position + getClientHeight() >= getScrollHeight()) {
  82. document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
  83. clearInterval($("goTop-troy").timerScroll);
  84. $("goTop-troy").timerScroll = null;
  85. }
  86. document.body.scrollTop = document.documentElement.scrollTop = position;
  87. },
  88. 30);
  89. };
  90. //================主要代码区============
  91. function createBtn(){
  92. if($("scrollMars-troy") && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
  93. $('scrollMars-troy').style.top=(getClientHeight()/3)+'px';//调整按钮位置
  94. }else if($("scrollMars-troy") && hasScroll() == false){//如果没有滚动条,但是有按钮
  95. $("scrollMars-troy").remove($("scrollMars-troy"));//删除按钮
  96. };
  97. if (hasScroll() == false && !$("scrollMars-troy")) {//如果没有滚动条,并且没有按钮
  98. return false;
  99. }else if(hasScroll() == true && !$("scrollMars-troy")){//如果有滚动条,并且没有按钮
  100. createElement("div", "scrollMars-troy",MarsCSS, document.documentElement);
  101. $("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>";
  102. $('scrollMars-troy').style.top=(getClientHeight()/3)+'px';
  103. $("goTop-troy").style.cssText = BottonCSS;
  104. $("goBtn-troy").style.cssText = BottonCSS;
  105. $("goTop-troy").innerHTML = "顶<br/>部";
  106. $("goBtn-troy").innerHTML = "底<br/>部";
  107. addEvent($("goTop-troy"), "click",function() {scrollTop()});
  108. addEvent($("goBtn-troy"), "click",function() {scrollBtn()});
  109. addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';});
  110. addEvent($("scrollMars-troy"), "mouseover",function() {movein()});
  111. addEvent($("scrollMars-troy"), "mouseout",function() {moveout()});
  112. addEvent($("goTop-troy"), "mouseover",function() {$("goTop-troy").style.background = "#FF0004";});
  113. addEvent($("goTop-troy"), "mouseout",function() {$("goTop-troy").style.background = "#303030";});
  114. addEvent($("goBtn-troy"), "mouseover",function() {$("goBtn-troy").style.background = "#FF0004";});
  115. addEvent($("goBtn-troy"), "mouseout",function() {$("goBtn-troy").style.background = "#303030";});
  116. moveout();//页面加载完成,默认3s后隐藏到边栏
  117. };
  118. };
  119. //================样式区============
  120. //遮罩层样式
  121. var MarsCSS='\
  122. width:100px !important;\
  123. height:120px !important;\
  124. position:fixed !important;\
  125. right:20px !important;\
  126. z-index:999999 !important;\
  127. '
  128. //两个按钮样式
  129. var BottonCSS='\
  130. width:40px !important;\
  131. height:40px !important;\
  132. text-align:center !important;\
  133. padding:5px !important;\
  134. margin:5px auto !important;\
  135. background:#303030;\
  136. color:#fff !important;\
  137. display:block !important;\
  138. opacity:0.8 !important;\
  139. fitter:alpha(opacity:80) !important;\
  140. cursor:pointer !important;\
  141. border-radius:50% !important;\
  142. box-shadow:2px 2px 40px 2px #303030 !important;\
  143. font-size:16px; !important;\
  144. font-family:"微软雅黑" !important;\
  145. z-index:9999;\
  146. '
  147. //================执行区============
  148. addEvent(window.top,"load",function(){createBtn()});
  149. addEvent(window.top, "resize",function(){createBtn()});
  150. })()

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址