平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮
26.03.2015 itibariyledir. En son verisyonu görün.
Destek için yazarın sitesini ziyaret edin, bir soru sorun, yorum gönderin veya komut dosyasını bildirin.
Satırları kaydır
// ==UserScript==
// @name	平滑的滚动到顶部/底部
// @author	burningall
// @description	为网页增加滚到顶部和底部按钮
// @version     2015.3.26-1.0
// @include			http://*
// @include			https://*
// @include			ftp://*
// @supportURL		http://www.burningall.com
// @contributionURL	[email protected]|alipay.com
// @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy
// ==/UserScript==

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() {
	var hasScroll;
	return getScrollHeight() > getClientHeight() ? hasScroll = 1 : hasScroll = 0;
}; (addEvent(window.top, "load",
function() {
	if (hasScroll() == 1) {
	function doRotate(obj,dir,angle){
	clearInterval(obj.timerRotate);
	var speed = 0;
	function initial(){	//初始化
		obj.style.MozTransform = "rotate(0)"
		obj.style.WebkitTransform = "rotate(0)"
		obj.style.transform = "rotate(0)"
	};
	function letRo(){	//开始转动
		obj.style.MozTransform = "rotate("+ speed +"deg)";	//兼容firefox
		obj.style.WebkitTransform = "rotate("+ speed +"deg)";	//兼容chrme
		obj.style.transform = "rotate("+ speed +"deg)";	//兼容IE	
	};
	obj.timerRotate=setInterval(function(){
		if(dir && dir<0){	//如过逆时针转
			speed = -speed;
			speed += parseInt(( Math.abs( speed/dir )+10 ) );
			speed = -speed;
			}else{	//如果顺时针转
				speed += parseInt( Math.abs( speed/dir+10 ) );
				};
		letRo();
		if(angle && Math.abs(speed)>=angle){	//如过转到目标点
			initial();
			clearInterval(obj.timerRotate)
			}else if(!angle && Math.abs(speed)>=360){ //无限旋转时，转一圈清零，防止数字越来越大。
					speed = 0;
					speed += (speed/dir)+num;
					initial();
					letRo();
				};
		},30)
		};
		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);
		}
		createElement("div", "scrollMars-troy", "width:100px;height:120px;position:fixed;right:20px;z-index:9999;", document.documentElement);
		$("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>";
		var scrollStyle = "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;z-index:9999";
		$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';
		$("goTop-troy").style.cssText = scrollStyle;
		$("goBtn-troy").style.cssText = scrollStyle;
		$("goTop-troy").innerHTML = "顶<br/>部";
		$("goBtn-troy").innerHTML = "底<br/>部";
		addEvent($("goTop-troy"), "click",
		function() {
			doRotate($("goTop-troy"),50,720);
			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);
		});
		addEvent($("goBtn-troy"), "click",
		function() {
			doRotate($("goBtn-troy"),-50,720);
			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);
		});
		addEvent($("scrollMars-troy"), "mouseover",
		function() {
			clearTimeout($("scrollMars-troy").timerHover);
			doMove($("scrollMars-troy"), "right", 10, 20,
			function() {
				doMove($("scrollMars-troy"), "width", 20, 100);
			});
		});
		addEvent($("scrollMars-troy"), "mouseout",
		function() {
			clearTimeout($("scrollMars-troy").timerHover);
			$("scrollMars-troy").timerHover = setTimeout(function() {
				doMove($("scrollMars-troy"), "right", 10, -80,
				function() {
					doMove($("scrollMars-troy"), "width", 20, 160);
				});
			},
			3000);
		});
		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";
		});
	};
}));