// ==UserScript==
// @name Add button for Smooth Scroll to the top / bottom
// @author burningall
// @description 为页面添加按钮，平滑的滚动到顶部/底部
// @version 2015.6.11
// @include *
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_listValues
// @grant GM_deleteValue
// @supportURL http://www.burningall.com
// @contributionURL [email protected]|alipay.com
// @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy
// ==/UserScript==
(function(){
function checkList(){
if( GM_getValue(window.top.location.host,'不在黑名单中')==window.top.location.host ){//如果该页面在黑名单中，则不执行
console.log('该域名在黑名单中');
return true;
};
};
var d1=new Date().getTime()
//================公共函数区============
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 getStyle(obj, attr) {return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];}
function $(id) {return document.getElementById(id);}
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;\
}\
#setting-troy{\
width: 300px !important;\
height: auto !important;\
border: 2px solid #303030 !important;\
position: fixed !important;\
top: 200px !important;\
left: 33% !important;\
color: #fff !important;\
background: #303030 !important;\
z-index:9999999999 !important;\
}\
#setting-troy>div{\
margin: 20px !important;\
}\
#setting-troy>div input{\
color:#fff !important;\
background:#303030 !important;\
padding:5px !important;\
margin:5px !important;\
}\
#percent{\
position:absolute !important;\
top:42px !important;\
left:-20px;\
color:#147474 !important;\
font-family:"微软雅黑" !important;\
font-size:16px !important;\
line-height:16px !important;\
}\
'
GM_addStyle(cssText);
//================主要代码区============
GM_getValue("turn") ? GM_setValue("turn",true) : GM_setValue("turn",GM_getValue("turn"));
function readmode(speed,inteval,endFn){
if( GM_getValue("turn")==false ){
return;
}
clearInterval(document.readMode)
document.readMode=setInterval(function(){
var position=getSize('scrollTop')+speed
document.body.scrollTop = document.documentElement.scrollTop = position;
clearTimeout(document.showPercent);
var precent=parseInt( getSize('scrollTop') / ( getSize('scrollHeight')-getSize('clientHeight') ) * 100);
$('percent').style.display="block";
$('percent').innerHTML=precent+'%';
if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
clearInterval(document.readMode);
$('percent').style.display="none";
}
},inteval)
GM_setValue("turn",true);
}
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);
clearInterval(document.readMode);
obj.timerScroll=setInterval(function(){
var position;
if(dir>0){//往上滚动
var speed = (getSize('scrollTop') / 10) + 10;
position = getSize('scrollTop') - speed;
if (position <= 0) {//如果滚到顶部
document.body.scrollTop = document.documentElement.scrollTop = 0;
clearInterval(obj.timerScroll);
}
}else{//往下滚动
var speed = ((getSize('scrollHeight')-getSize('scrollTop')) / 20) + 10;
position = getSize('scrollTop') + speed;
if (position + getSize('clientHeight') >= getSize('scrollHeight')) {//如果滚到底部
document.body.scrollTop = document.documentElement.scrollTop = getSize('scrollHeight');
clearInterval(obj.timerScroll);
}
}
document.body.scrollTop = document.documentElement.scrollTop = position;
},20)
}
function createBtn(){
if(checkList()==true){
return false;
}
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='percent'></div><div id='mars-point'></div><div><div id='goTop-troy' title='返回顶部'></div><div id='goBtn-troy' title='去到底部'></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,'mousewheel',function(){//滚动则停止，兼容chrome/ie/opera
clearInterval($('scrollMars-troy').timerScroll);
})
addEvent(window,'DOMMouseScroll',function(){//滚动则停止，兼容firefox
clearInterval($('scrollMars-troy').timerScroll);
})
var isinput=false;//用于判断是否是点击到了特定元素上，如果是，就不进入阅读模式
addEvent(document,'dblclick',function(){//双击进入阅读模式
isinput==false && readmode(1,20);
})
addEvent(document,'click',function(){//单击退出阅读模式,停止滚动
clearInterval(document.readMode);
$('percent').style.display="none";
})
addEvent(window.top, "resize",function(){//页面大小改变，初始化按钮
createBtn();
});
addEvent(window.top,"load",function(){//页面加载，初始化按钮
createBtn();
//选择要禁用的元素（点击这些元素，不会进入阅读模式）
var oInputs=document.querySelectorAll('input,form,textarea,#scrollMars-troy,.edui-editor-middle');
for(var i=0;i<oInputs.length;i++){
oInputs[i].ondblclick=function(){
isinput=true;
}
addEvent(document,'dblclick',function(){
isinput=false;
})
};
var d2=new Date().getTime();
console.log('GoTop-GoBtm脚本加载耗时：'+(d2-d1)+'ms');
});
//================快捷键区============
addEvent(document,'keydown',function(e){
e=e || window.top.event;
if(e.ctrlKey && e.keyCode==38){//ctrl+↑，向上滚动
scroll($('scrollMars-troy'),1)
}else if(e.ctrlKey && e.keyCode==40){//ctrl+↓，向下滚动
scroll($('scrollMars-troy'),-1)
}else if(e.ctrlKey && e.keyCode==113){//ctrl+F2，调处控制面板
$('setting-troy') && setting.remove(setting);
var setting=document.createElement('div');
setting.id='setting-troy';
var inner="\
<div id='setting-pan-troy'>\
<div>\
控制面板:Ctrl+F2<br />\
添加黑名单域名：<input type='text' id='blackList' placeholder='www.baidu.com' /><br />\
<input type='button' value='添加黑名单' id='saveSetting' />\
<input type='button' id='quiet' value='退出面板' /><br/><hr />\
<input type='button' id='clear' value='移除黑名单'>\
<input type='button' id='showlist' value='显示黑名单'>\
<input type='button' id='clearall' value='清空黑名单'>\
<input type='button' id='readmodebtn' value='双击滚动开关'>\
</div>\
</div>\
"
window.top.document.documentElement.appendChild(setting);
setting.innerHTML=inner;
var domian=/^[0-9-a-z]+\.{0,1}[0-9-a-z]+\.{1}[a-z]+$/ig;//用于验证域名是否符合规范
var host=window.top.location.host;
$('blackList').value=host;
//GM_setValue("turn",true);//第一次安装脚本，默认开启双击滚动
addEvent($('quiet'),'click',function(){//退出
setting.remove(setting);
});
addEvent($('clear'),'click',function(){//移出黑名单
GM_deleteValue($('blackList').value);
alert( GM_getValue($('blackList').value,'移除成功') );
});
addEvent($('clearall'),'click',function(){//清空黑名单
for(var i=0;i<GM_listValues().length;i++){
if(domian.test( GM_listValues()[i] )==true){
console.log('黑名单：'+GM_listValues()[i]+'被删除');
GM_deleteValue( GM_listValues()[i] );
}
};//for
alert('清空完毕');
})
addEvent($('showlist'),'click',function(){//显示黑名单
if(GM_listValues().length<=1){
alert('空的黑名单');
}
for(var i=0;i<GM_listValues().length;i++){
if(domian.test( GM_listValues()[i] )==true){
var list=document.createElement('li');
list.innerHTML=GM_listValues()[i];
document.querySelector('#setting-pan-troy>div').appendChild(list);
}
}
});
addEvent($('readmodebtn'),'click',function(){//禁用双击滚动
console.log(GM_getValue("turn"),"空的变量");
if( GM_getValue("turn")==true ){
GM_setValue("turn",false);
alert('禁用成功');
return;
}else if(GM_getValue("turn")==false){
GM_setValue("turn",true);
alert('开启成功');
return;
}
})
addEvent($('saveSetting'),'click',function(){//保存
if(domian.test($('blackList').value)==false){//检查输入的域名是否符合规范
alert($('blackList').value+'域名格式不正确'+'\n比如：tieba.baidu.com或www.baidu.com')
return;
}
if($('blackList').value!=''){//如果有填入黑名单列表
if( GM_getValue($('blackList').value,'不存在这个黑名单')!=$('blackList').value ){//不在黑名单中
GM_setValue($('blackList').value,$('blackList').value);
alert('禁用：'+$('blackList').value+'成功');
}else{
alert('该域名已在黑名单中');
}
}else{//没有填入黑名单
alert('请输入域名');
return;
}
})
}
})//监听keydown，快捷键
/*
//清除GM脚本保存的所有变量;，调试时用，请不要开启
function clearallGM_value(){
for(var i=0;i<GM_listValues().length;i++){
console.log('变量：'+GM_listValues()[i]+'被删除');
GM_deleteValue( GM_listValues()[i] );
};
}
clearallGM_value()
*/
})()
