☰

Add button for Smooth Scroll to the top / bottom

为页面添加按钮，平滑的滚动到顶部/底部

当前为 2015-05-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name	Add button for Smooth Scroll to the top / bottom
// @author	burningall
// @description	为页面添加按钮，平滑的滚动到顶部/底部
// @version     2015.5.25
// @include			http://*
// @include			https://*
// @include			ftp://*
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://greasyfork.org/zh-CN/users/3400-axetroy
// ==/UserScript==

(function(){
//================公共函数区============
function addEvent(obj, event, fn) {return obj.addEventListener ? obj.addEventListener(event, fn, false) : obj.attachEventListener("on" + event, fn);};
function getScrollHeight() {return document.body ? bodyScrollHeight = document.body.scrollHeight: document.documentElement.scrollHeight;};
function getClientHeight() {return document.documentElement ? document.documentElement.clientHeight: document.body.clientHeight;};
function hasScroll() {return getScrollHeight() > getClientHeight() ? true : false;};
function $(id) {return document.getElementById(id);}
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;}
function createElement(tagName, idName, styleList, appendPosition, endFn) {
	var newElement = document.createElement(tagName);
	newElement.id = idName;
	newElement.style.cssText = styleList;
	appendPosition && appendPosition.appendChild(newElement);
	endFn && endFn();
}
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);
};
function movein(){
			clearTimeout($("scrollMars-troy").timerHover);
			doMove($("scrollMars-troy"), "right", 10, 20,function() {
				doMove($("scrollMars-troy"), "width", 20, 100);
			});
};
function moveout(){
			clearTimeout($("scrollMars-troy").timerHover);
			$("scrollMars-troy").timerHover = setTimeout(function() {
				doMove($("scrollMars-troy"), "right", 10, -80,function() {
					doMove($("scrollMars-troy"), "width", 20, 160);
				});
			},
			3000);//鼠标离开后，3s隐藏到边栏
};
function scrollTop(){
			clearInterval($("goTop-troy").timerScroll);
			$("goTop-troy").timerScroll = setInterval(function() {
				var speed = (getScrollTop() / 5) + 10;
				position = getScrollTop() - speed;
				if (position <= 0) {
					document.body.scrollTop = document.documentElement.scrollTop = 0;
					clearInterval($("goTop-troy").timerScroll);
					$("goTop-troy").timerScroll = null;
				}
				document.body.scrollTop = document.documentElement.scrollTop = position;
			},
			30);
};
function scrollBtn(){
			clearInterval($("goTop-troy").timerScroll);
			$("goTop-troy").timerScroll = setInterval(function() {
				var speed = (getScrollTop() / 5) + 10;
				position = getScrollTop() + speed;
				if (position + getClientHeight() >= getScrollHeight()) {
					document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
					clearInterval($("goTop-troy").timerScroll);
					$("goTop-troy").timerScroll = null;
				}
				document.body.scrollTop = document.documentElement.scrollTop = position;
			},
			30);
};
//================主要代码区============
function createBtn(){
	if($("scrollMars-troy") && hasScroll() == true){//如果有滚动条,并且存在滚动按钮
		$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';//调整按钮位置
	}else if($("scrollMars-troy") && hasScroll() == false){//如果没有滚动条，但是有按钮
		$("scrollMars-troy").remove($("scrollMars-troy"));//删除按钮
	};
	if (hasScroll() == false && !$("scrollMars-troy")) {//如果没有滚动条,并且没有按钮
		return false;
	}else if(hasScroll() == true && !$("scrollMars-troy")){//如果有滚动条，并且没有按钮
		createElement("div", "scrollMars-troy",MarsCSS, document.documentElement);
		$("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>";
		$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';
		$("goTop-troy").style.cssText = BottonCSS;
		$("goBtn-troy").style.cssText = BottonCSS;
		$("goTop-troy").innerHTML = "顶<br/>部";
		$("goBtn-troy").innerHTML = "底<br/>部";
		addEvent($("goTop-troy"), "click",function() {scrollTop()});
		addEvent($("goBtn-troy"), "click",function() {scrollBtn()});
		addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';});
		addEvent($("scrollMars-troy"), "mouseover",function() {movein()});
		addEvent($("scrollMars-troy"), "mouseout",function() {moveout()});
		addEvent($("goTop-troy"), "mouseover",function() {$("goTop-troy").style.background = "#FF0004";});
		addEvent($("goTop-troy"), "mouseout",function() {$("goTop-troy").style.background = "#303030";});
		addEvent($("goBtn-troy"), "mouseover",function() {$("goBtn-troy").style.background = "#FF0004";});
		addEvent($("goBtn-troy"), "mouseout",function() {$("goBtn-troy").style.background = "#303030";});
		moveout();//页面加载完成，默认3s后隐藏到边栏
	};
};
//================样式区============
		//遮罩层样式
		var MarsCSS='\
			width:100px !important;\
			height:120px !important;\
			position:fixed !important;\
			right:20px !important;\
			z-index:999999 !important;\
		'
		//两个按钮样式
		var BottonCSS='\
			width:40px !important;\
			height:40px !important;\
			text-align:center !important;\
			padding:5px !important;\
			margin:5px auto !important;\
			background:#303030;\
			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;\
			font-size:16px; !important;\
			font-family:"微软雅黑" !important;\
			z-index:9999;\
		'
//================执行区============
addEvent(window.top,"load",function(){createBtn()});
addEvent(window.top, "resize",function(){createBtn()});
})()