// ==UserScript== // @name Add button for Smooth Scroll to the top / bottom // @author burningall // @description 为页面添加按钮,平滑的滚动到顶部/底部 // @version 2015.7.14 // @include * // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // @grant GM_listValues // @grant GM_deleteValue // @run-at document-start // @compatible chrome 完美支持 // @compatible firefox 完美支持 // @license The MIT License (MIT); http://opensource.org/licenses/MIT // @supportURL http://www.burningall.com // @contributionURL troy450409405@gmail.com|alipay.com // @namespace https://greasyfork.org/zh-CN/users/3400-axetroy // @downloadURL https://update.greasyfork.icu/scripts/8719/Add%20button%20for%20Smooth%20Scroll%20to%20the%20top%20%20bottom.user.js // @updateURL https://update.greasyfork.icu/scripts/8719/Add%20button%20for%20Smooth%20Scroll%20to%20the%20top%20%20bottom.meta.js // ==/UserScript== //========快捷键列表======= //【Ctrl+F2】>>>>>调出控制面板 //【Ctrl+Alt】>>>>呼出按钮 //【alt+1】>>>>>>>向上滚动 //【alt+2】>>>>>>>向下滚动 //【Esc】>>>>>>>>>退出控制面板 function checkList() { if (GM_getValue(window.top.location.host, '不在黑名单中') == window.top.location.host) { //如果该页面在黑名单中,则不执行 return true; }; }; //================公共函数区============ 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 !important;\ right:30px;\ z-index:9999999 !important;\ }\ \ .sroll-btn-troy{\ width:50px !important;\ height:50px !important;\ text-align:center !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:50px !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 (!$('percent') || GM_getValue("turn") == false || createBtn() == 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 = "\
\ \