Add button for Smooth Scroll to the top / bottom

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

Versão de: 24/05/2015. Veja: a última versão.

Você precisará instalar uma extensão como Tampermonkey, Greasemonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Violentmonkey para instalar este script.

Você precisará instalar uma extensão como Tampermonkey ou Userscripts para instalar este script.

Você precisará instalar uma extensão como o Tampermonkey para instalar este script.

Você precisará instalar um gerenciador de scripts de usuário para instalar este script.

(Eu já tenho um gerenciador de scripts de usuário, me deixe instalá-lo!)

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar uma extensão como o Stylus para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

Você precisará instalar um gerenciador de estilos de usuário para instalar este estilo.

(Eu já possuo um gerenciador de estilos de usuário, me deixar fazer a instalação!)

// ==UserScript==
// @name	Add button for Smooth Scroll to the top / bottom
// @author	burningall
// @description	为页面添加按钮,平滑的滚动到顶部/底部
// @version     2015.5.25.2
// @include		*
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://greatest.deepsurf.us/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;
			},
			10);
};
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;
			},
			10);
};
//================主要代码区============
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;\
			height:120px;\
			position:fixed;\
			right:20px;\
			z-index:99999;\
		'
		//两个按钮样式
		var BottonCSS='\
			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 #303030;\
			font-size:16px;\
			font-family:"微软雅黑";\
			z-index:9999;\
		'
//================执行区============
addEvent(window.top,"load",function(){createBtn()});
addEvent(window.top, "resize",function(){createBtn()});
})()