// ==UserScript==
// @name Scroll to Bottom or Top Smooth
// @author burningall
// @description 为网页增加滚到顶部和底部按钮
// @version 2015.3.22
// @include http://*
// @include https://*
// @include ftp://*
// @supportURL http://www.burningall.com
// @contributionURL [email protected]|alipay.com
// @namespace https://greatest.deepsurf.us/users/5506
// ==/UserScript==
//绑定事件函数
//使用方法：addEvent(ovj,'event',function(){})
function addEvent(obj,event,fn){
if(obj.addEventListener){//非IE浏览器，主流
obj.addEventListener(event,fn,false);
}else if(obj.attachEventListener){//IE浏览器，IE6以上
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() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
//获取浏览器可见的窗口高度
function getClientHeight(){
if(document.documentElement){return document.documentElement.clientHeight}
else if(document.body){ return document.body.clientHeight}
}
//获取文档总高度
//scrollTop + clientHeight == scrollHeight
//滚动条高度+浏览器可是区域高度=文档总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return 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",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"
$('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)
})
})
}))
