Add button for Smooth Scroll to the top / bottom

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

目前為 2015-06-04 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name	Add button for Smooth Scroll to the top / bottom
// @author	burningall
// @description	为页面添加按钮,平滑的滚动到顶部/底部
// @version     2015.6.4
// @include		*
// @grant       GM_addStyle
// @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 getSize(obj) {return document.documentElement[obj]!=0 ? document.documentElement[obj]: document.body[obj];}
function hasScroll() {return getSize('scrollHeight') > getSize('clientHeight') ? true : false;};
function $(id) {return document.getElementById(id);}
function getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
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);
	obj.timerScroll=setInterval(function(){
		var position;
		var speed = (getSize('scrollTop') / 5) + 10;
		if(dir>0){//往上滚动
			position = getSize('scrollTop') - speed;
			if (position <= 0) {//如果滚到顶部
				document.body.scrollTop = document.documentElement.scrollTop = 0;
				clearInterval(obj.timerScroll);
				obj.timerScroll = null;
			}
		}else{//往下滚动
			position = getSize('scrollTop') + speed;
			if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
				document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
				clearInterval(obj.timerScroll);
				obj.timerScroll = null;
			}
		}
		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='mars-point'></div><div><div id='goTop-troy'></div><div id='goBtn-troy'</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,"load",function(){createBtn()});
addEvent(window.top, "resize",function(){createBtn()});
})()