为网页增加滚到顶部和底部按钮
Versão de:
// ==UserScript== // @name 平滑的滚动到顶部/底部 // @author burningall // @description 为网页增加滚到顶部和底部按钮 // @version 2015.3.22-1.2.2 // @include http://* // @include https://* // @include ftp://* // @supportURL http://www.burningall.com // @contributionURL [email protected]|alipay.com // @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy // ==/UserScript== //绑定事件函数 //使用方法：addEvent(ovj,'event',function(){}) function addEvent(obj,event,fn){ return obj.addEventListener ? obj.addEventListener(event,fn,false) : obj.attachEventListener('on'+event,fn); } (addEvent(window,'load',function(){ //元素ID选择 //使用方法：$('id') function $(id){ return document.getElementById(id) } //获取元素的属性/样式 //使用方法getStyle(对象，"属性")，像素带px //parseInt(getStyle($("scrollMars"),"width"))获取不带px的数据 function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] :getComputedStyle(obj)[attr]; } //获取滚动条位置 function getScrollTop(){ return document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; } //获取浏览器可见的窗口高度 function getClientHeight(){ return document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight } //获取文档总高度 //scrollTop + clientHeight == scrollHeight //滚动条高度+浏览器可是区域高度=文档总高度 function getScrollHeight(){ return document.body ? bodyScrollHeight = document.body.scrollHeight : document.documentElement.scrollHeight; } //创建元素 //使用方法 createElement("div","demo","width:500px;height:500px",document.documentElement) function createElement(tagName,idName,styleList,appendPosition){ var newElement = document.createElement(tagName);//创建元素的标签命 newElement.id=idName;//设置元素的属性 newElement.style.cssText=styleList;//设置元素样式 appendPosition.appendChild(newElement);//插入元素 } //元素的属性变化/移动 //使用方法doMove(obj,"left",20,800),对象，属性，速度，目标点 function doMove(obj,attr,dir,target,endFn){ dir=parseInt(getStyle(obj,attr))<target ? dir : -dir; //对于方向矫正 clearInterval(obj.timer) obj.timer=setInterval(function(){ var speed=parseInt(getStyle(obj,attr))+dir //步长 if(speed>target&&dir>0 || speed<target&&dir<0){ //判断往前或往后 speed=target } obj.style[attr]=speed+"px" //赋值 if(speed==target){ clearInterval(obj.timer) endFn &&endFn() //回掉函数 } },30) } //创建元素 createElement("div","scrollMars","width:100px;height:120px;position:fixed;right:20px;top:200px;z-index:9999",document.documentElement) scrollMars.innerHTML="<div id='goTop'></div>"+"<div id='goBtn'></div>" 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 #fff;" $('goTop').style.cssText=scrollStyle $('goBtn').style.cssText=scrollStyle $('goTop').innerHTML="顶"+"<br/>"+"部" $('goBtn').innerHTML="底"+"<br/>"+"部" var topStyle=$('goTop').style var btnStyle=$('goBtn').style addEvent($("goTop"),'click',function(){ clearInterval(timer) var timer timer=setInterval(function(){ var speed=(getScrollTop()/5)+10 position=getScrollTop()-speed; if(position<=0){ document.body.scrollTop=document.documentElement.scrollTop=0; clearInterval(timer); } document.body.scrollTop=document.documentElement.scrollTop=position },30) }) //向下滚动 addEvent($("goBtn"),'click',function(){ clearInterval(timer) var timer timer=setInterval(function(){ var speed=(getScrollTop()/5)+10 position=getScrollTop()+speed; if(position+getClientHeight()>=getScrollHeight()){ document.body.scrollTop=document.documentElement.scrollTop=getScrollHeight(); clearInterval(timer); } document.body.scrollTop=document.documentElement.scrollTop=position },30) }) //鼠标移入与移出 addEvent($("scrollMars"),'mouseover',function(){ //鼠标移入 doMove($("scrollMars"),'right',10,20,function(){ doMove($("scrollMars"),'width',20,100) }) }) addEvent($("scrollMars"),'mouseout',function(){ //鼠标移出 doMove($("scrollMars"),'right',10,-80,function(){ doMove($("scrollMars"),'width',20,160) }) }) }))
