平滑的滚动到顶部/底部

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

当前为 2015-03-22 提交的版本,查看 最新版本

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