// ==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://greasyfork.org/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";
});
};
}));
