Greasy Fork 还支持 简体中文。

平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮

目前為 2015-03-22 提交的版本,檢視 最新版本

  1. // ==UserScript==
  2. // @name 平滑的滚动到顶部/底部
  3. // @author burningall
  4. // @description 为网页增加滚到顶部和底部按钮
  5. // @version 2015.3.22
  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://greasyfork.org/users/5506
  12. // ==/UserScript==
  13.  
  14. //绑定事件函数
  15. //使用方法:addEvent(ovj,'event',function(){})
  16. function addEvent(obj,event,fn){
  17. if(obj.addEventListener){//非IE浏览器,主流
  18. obj.addEventListener(event,fn,false);
  19. }else if(obj.attachEventListener){//IE浏览器,IE6以上
  20. obj.attachEventListener('on'+event,fn);
  21. }
  22. }
  23. (addEvent(window,'load',function(){
  24. //元素ID选择
  25. //使用方法:$('id')
  26. function $(id){
  27. return document.getElementById(id)
  28. }
  29. //获取元素的属性/样式
  30. //使用方法getStyle(对象,"属性"),像素带px
  31. //parseInt(getStyle($("scrollMars"),"width"))获取不带px的数据
  32. function getStyle(obj,attr){
  33. return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj)[attr];
  34. }
  35.  
  36. //获取滚动条位置
  37. function getScrollTop() {
  38. var scrollPos;
  39. if (window.pageYOffset) {
  40. scrollPos = window.pageYOffset; }
  41. else if (document.compatMode && document.compatMode != 'BackCompat')
  42. { scrollPos = document.documentElement.scrollTop; }
  43. else if (document.body) { scrollPos = document.body.scrollTop; }
  44. return scrollPos;
  45. }
  46. //获取浏览器可见的窗口高度
  47. function getClientHeight(){
  48. if(document.documentElement){return document.documentElement.clientHeight}
  49. else if(document.body){ return document.body.clientHeight}
  50. }
  51. //获取文档总高度
  52. //scrollTop + clientHeight == scrollHeight
  53. //滚动条高度+浏览器可是区域高度=文档总高度
  54. function getScrollHeight(){
  55.   var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  56.   if(document.body){
  57.     bodyScrollHeight = document.body.scrollHeight;
  58.   }
  59.   if(document.documentElement){
  60.     documentScrollHeight = document.documentElement.scrollHeight;
  61.   }
  62.   scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  63.   return scrollHeight;
  64. }
  65. //创建元素
  66. //使用方法 createElement("div","demo","width:500px;height:500px",document.documentElement)
  67. function createElement(tagName,idName,styleList,appendPosition){
  68. var newElement = document.createElement(tagName);//创建元素的标签命
  69. newElement.id=idName;//设置元素的属性
  70. newElement.style.cssText=styleList;//设置元素样式
  71. appendPosition.appendChild(newElement);//插入元素
  72. }
  73. //元素的属性变化/移动
  74. //使用方法doMove(obj,"left",20,800),对象,属性,速度,目标点
  75. function doMove(obj,attr,dir,target,endFn){
  76. dir=parseInt(getStyle(obj,attr))<target ? dir : -dir; //对于方向矫正
  77. clearInterval(obj.timer)
  78. obj.timer=setInterval(function(){
  79. var speed=parseInt(getStyle(obj,attr))+dir //步长
  80. if(speed>target&&dir>0 || speed<target&&dir<0){ //判断往前或往后
  81. speed=target
  82. }
  83. obj.style[attr]=speed+"px" //赋值
  84. if(speed==target){
  85. clearInterval(obj.timer)
  86. endFn &&endFn() //回掉函数
  87. }
  88. },30)
  89. }
  90. //创建元素
  91. createElement("div","scrollMars","width:100px;height:120px;position:fixed;right:20px;top:200px;z-index:9999",document.documentElement)
  92. scrollMars.innerHTML="<div id='goTop'></div>"+"<div id='goBtn'></div>"
  93. var scrollStyle="width:40px;height:40px;text-align:center;padding:5px;margin:5px auto;background:#303030;color:#fff;display:block;opacity:0.8;fitter:alpha(opacity:80);cursor:pointer"
  94. $('goTop').style.cssText=scrollStyle
  95. $('goBtn').style.cssText=scrollStyle
  96. $('goTop').innerHTML="顶"+"<br/>"+"部"
  97. $('goBtn').innerHTML="底"+"<br/>"+"部"
  98. var topStyle=$('goTop').style
  99. var btnStyle=$('goBtn').style
  100. addEvent($("goTop"),'click',function(){
  101. clearInterval(timer)
  102. var timer
  103. timer=setInterval(function(){
  104. var speed=(getScrollTop()/5)+10
  105. position=getScrollTop()-speed;
  106. if(position<=0){
  107. document.body.scrollTop=document.documentElement.scrollTop=0;
  108. clearInterval(timer);
  109. }
  110. document.body.scrollTop=document.documentElement.scrollTop=position
  111. },30)
  112. })
  113. //向下滚动
  114. addEvent($("goBtn"),'click',function(){
  115. clearInterval(timer)
  116. var timer
  117. timer=setInterval(function(){
  118. var speed=(getScrollTop()/5)+10
  119. position=getScrollTop()+speed;
  120. if(position+getClientHeight()>=getScrollHeight()){
  121. document.body.scrollTop=document.documentElement.scrollTop=getScrollHeight();
  122. clearInterval(timer);
  123. }
  124. document.body.scrollTop=document.documentElement.scrollTop=position
  125. },30)
  126. })
  127. //鼠标移入与移出
  128. addEvent($("scrollMars"),'mouseover',function(){ //鼠标移入
  129. doMove($("scrollMars"),'right',10,20,function(){
  130. doMove($("scrollMars"),'width',20,100)
  131. })
  132. })
  133. addEvent($("scrollMars"),'mouseout',function(){ //鼠标移出
  134. doMove($("scrollMars"),'right',10,-80,function(){
  135. doMove($("scrollMars"),'width',20,160)
  136. })
  137. })
  138. }))