平滑的滚动到顶部/底部

为网页增加滚到顶部和底部按钮
Verzia zo dňa 24.03.2015. Pozri najnovšiu verziu.
Navštíviť stránky autora skriptu pre podporu, spýtať sa otázku, uverejniť recenziu, alebo nahlásiť skript.
Zalomiť riadky
// ==UserScript==
// @name	平滑的滚动到顶部/底部
// @author	burningall
// @description	为网页增加滚到顶部和底部按钮
// @version     2015.3.24-1.4
// @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 $(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;top:200px", 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.7;fitter:alpha(opacity:80);cursor:pointer;border-radius:50%;box-shadow:2px 2px 40px 2px #303030;font-size:16px;z-index:9999";
		$("goTop-troy").style.cssText = scrollStyle;
		$("goBtn-troy").style.cssText = scrollStyle;
		$("goTop-troy").innerHTML = "顶<br/>部";
		$("goBtn-troy").innerHTML = "底<br/>部";
		addEvent($("goTop-troy"), "click",
		function() {
			clearInterval($("goTop-troy").timer);
			$("goTop-troy").timer = setInterval(function() {
				var speed = (getScrollTop() / 5) + 10;
				position = getScrollTop() - speed;
				if (position <= 0) {
					document.body.scrollTop = document.documentElement.scrollTop = 0;
					clearInterval($("goTop-troy").timer);
					$("goTop-troy").timer = null;
				}
				document.body.scrollTop = document.documentElement.scrollTop = position;
			},
			30);
		});
		addEvent($("goBtn-troy"), "click",
		function() {
			clearInterval($("goTop-troy").timer);
			$("goTop-troy").timer = setInterval(function() {
				var speed = (getScrollTop() / 5) + 10;
				position = getScrollTop() + speed;
				if (position + getClientHeight() >= getScrollHeight()) {
					document.body.scrollTop = document.documentElement.scrollTop = getScrollHeight();
					clearInterval($("goTop-troy").timer);
					$("goTop-troy").timer = null;
				}
				document.body.scrollTop = document.documentElement.scrollTop = position;
			},
			30);
		});
		addEvent($("scrollMars-troy"), "mouseover",
		function() {
			clearTimeout($("scrollMars-troy").timerMove);
			doMove($("scrollMars-troy"), "right", 10, 20,
			function() {
				doMove($("scrollMars-troy"), "width", 20, 100);
			});
		});
		addEvent($("scrollMars-troy"), "mouseout",
		function() {
			clearTimeout($("scrollMars-troy").timerMove);
			$("scrollMars-troy").timerMove = 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";
		});
	};
}));