Lite Add button for Smooth Scroll to the top / bottom

为页面添加按钮，平滑的滚动到顶部/底部
目前为 2015-06-10 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name	Lite Add button for Smooth Scroll to the top / bottom
// @author	burningall
// @description	为页面添加按钮，平滑的滚动到顶部/底部
// @version     2015.6.10
// @include		*
// @grant       GM_addStyle
// @grant       GM_getValue
// @grant       GM_setValue
// @grant		GM_listValues
// @grant		GM_deleteValue
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://gf.qytechs.cn/zh-CN/users/3400-axetroy
// ==/UserScript==

(function(){
var d1=new Date().getTime()
//================公共函数区============
function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
function getSize(obj) {return document.documentElement[obj]!=0 ? document.documentElement[obj]: document.body[obj];}
function hasScroll() {return getSize('scrollHeight') > getSize('clientHeight') ? true : false;};
function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
function $(id) {return document.getElementById(id);}
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);
};
//================样式区============
var cssText='\
#scrollMars-troy{\
	position:fixed;\
	right:30px;\
	z-index:9999999;\
}\
\
#scrollMars-troy>div>div{\
	width:40px !important;\
	height:40px !important;\
	text-align:center !important;\
	padding:5px !important;\
	background:#303030 !important;\
	color:#fff !important;\
	display:block !important;\
	opacity:0.8 !important;\
	fitter:alpha(opacity:80) !important;\
	cursor:pointer !important;\
	border-radius:50% !important;\
	box-shadow:2px 2px 40px 2px #303030 !important;\
	line-height:40px !important;\
	font-size:35px !important;\
	font-style:inherit !important;\
	font-weight:bold !important;\
	font-family:"宋体" !important;\
}\
#scrollMars-troy>div>div:hover{\
	background:#FF0000 !important;\
}\
#mars-point{\
	width:100px !important;\
	height:100px !important;\
	position:absolute !important;\
	top:0 !important;\
	left:-40px !important;\
}\
'
GM_addStyle(cssText);
//================主要代码区============
function moveMars(obj,index){
	if(index=='mouseout'){
		clearTimeout(obj.timerHover);
		obj.timerHover = setTimeout(function() {
			doMove(obj, "right", 5, -30);
		},
		3000);//鼠标离开后，3s隐藏到边栏	
		}else if(index=='mouseover'){
			clearTimeout(obj.timerHover);
			doMove(obj, "right", 5, 30);
		}
}
function scroll(obj,dir){//obj随意，dir>0往上滚，dir<0往下滚
	clearInterval(obj.timerScroll);
	clearInterval(document.readMode);
	obj.timerScroll=setInterval(function(){
		var position;
		if(dir>0){//往上滚动
			var speed = (getSize('scrollTop') / 10) + 10;
			position = getSize('scrollTop') - speed;
			if (position <= 0) {//如果滚到顶部
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				clearInterval(obj.timerScroll);
			}
		}else{//往下滚动
			var speed = ((getSize('scrollHeight')-getSize('scrollTop')) / 20) + 10;
			position = getSize('scrollTop') + speed;
			if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
				document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
				clearInterval(obj.timerScroll);
			}
		}
		document.body.scrollTop = document.documentElement.scrollTop = position;		
	},20)
}

function createBtn(){
	var jugg=$("scrollMars-troy");
	if(jugg && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';//调整按钮位置
	}else if(jugg && hasScroll() == false){//如果没有滚动条，但是有按钮
		jugg.remove(jugg);//删除按钮
	};
	if (hasScroll() == false && !jugg) {//如果没有滚动条,并且没有按钮
		return false;
	}else if(hasScroll() == true && !jugg){//如果有滚动条，并且没有按钮
		var mars=document.createElement('div');
		mars.id="scrollMars-troy";
		window.top.document.documentElement.appendChild(mars);
		mars.innerHTML = "<div id='percent'></div><div id='mars-point'></div><div><div id='goTop-troy' title='返回顶部'></div><div id='goBtn-troy' title='去到底部'></div></div>";
		$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';
		$("goTop-troy").innerHTML = "↑";
		$("goBtn-troy").innerHTML = "↓";
		addEvent($("goTop-troy"), "click",function() {scroll(mars,1)});
		addEvent($("goBtn-troy"), "click",function() {scroll(mars,-1)});
		addEvent($("mars-point"), "mouseover",function() {moveMars(mars,"mouseover")});
		addEvent($("mars-point"), "mouseout",function() {moveMars(mars,"mouseout")});
		addEvent(mars, "mouseover",function() {moveMars(mars,"mouseover")});
		addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getSize('clientHeight')/3)+'px';});
		moveMars(mars,"mouseout");//页面加载完成，默认3s后隐藏到边栏
	};
};
//================执行区============
addEvent(window.top, "resize",function(){//页面大小改变，初始化按钮
	createBtn();
});
addEvent(window.top,"load",function(){//页面加载，初始化按钮
	createBtn();
	var d2=new Date().getTime();
	console.log('GoTop-GoBtm脚本加载耗时：'+(d2-d1)+'ms');
});
//================快捷键区============
addEvent(document,'keydown',function(e){
	e=e || window.top.event;
	if(e.ctrlKey && e.keyCode==38){//ctrl+↑，向上滚动
		scroll($('scrollMars-troy'),1)
	}else if(e.ctrlKey && e.keyCode==40){//ctrl+↓，向下滚动
		scroll($('scrollMars-troy'),-1)
	}
	})
})()
欢迎访问Greasy Fork镜像
