Add button for Smooth Scroll to the top / bottom

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

Από την 04/06/2015. Δείτε την τελευταία έκδοση.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey, το Greasemonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

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

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Violentmonkey για να εγκαταστήσετε αυτόν τον κώδικα.

θα χρειαστεί να εγκαταστήσετε μια επέκταση όπως το Tampermonkey ή το Userscripts για να εγκαταστήσετε αυτόν τον κώδικα.

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

Θα χρειαστεί να εγκαταστήσετε μια επέκταση διαχείρισης κώδικα χρήστη για να εγκαταστήσετε αυτόν τον κώδικα.

(Έχω ήδη έναν διαχειριστή κώδικα χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(Έχω ήδη έναν διαχειριστή στυλ χρήστη, επιτρέψτε μου να τον εγκαταστήσω!)

// ==UserScript==
// @name	Add button for Smooth Scroll to the top / bottom
// @author	burningall
// @description	为页面添加按钮,平滑的滚动到顶部/底部
// @version     2015.6.4.1
// @include		*
// @grant       GM_addStyle
// @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 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()});
})()