平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮
当前为 2015-03-23 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name	平滑的滚动到顶部/底部
// @author	burningall
// @description	为网页增加滚到顶部和底部按钮
// @version     2015.3.23-1.0
// @include			http://*
// @include			https://*
// @include			ftp://*
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://gf.qytechs.cn/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 #000;font-size:16px;"
	$('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)
				})
			})
	  }))
欢迎访问Greasy Fork镜像
