Add button for Smooth Scroll to the top / bottom

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

נכון ליום 04-06-2015. ראה הגרסה האחרונה.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

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

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

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

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

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

(I already have a user script manager, let me install it!)

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.

(I already have a user style manager, let me install it!)

// ==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://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()});
})()