为页面添加按钮，平滑的滚动到顶部/底部
От
// ==UserScript== // @name Add button for Smooth Scroll to the top / bottom // @author burningall // @description 为页面添加按钮，平滑的滚动到顶部/底部 // @version 2015.5.25.2 // @include * // @supportURL http://www.burningall.com // @contributionURL [email protected]|alipay.com // @namespace https://greatest.deepsurf.us/zh-CN/users/3400-axetroy // ==/UserScript== (function(){ //================公共函数区============ 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() {return getScrollHeight() > getClientHeight() ? true : false;}; 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); }; function movein(){ clearTimeout($("scrollMars-troy").timerHover); doMove($("scrollMars-troy"), "right", 10, 20,function() { doMove($("scrollMars-troy"), "width", 20, 100); }); }; function moveout(){ clearTimeout($("scrollMars-troy").timerHover); $("scrollMars-troy").timerHover = setTimeout(function() { doMove($("scrollMars-troy"), "right", 10, -80,function() { doMove($("scrollMars-troy"), "width", 20, 160); }); }, 3000);//鼠标离开后，3s隐藏到边栏 }; function scrollTop(){ 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; }, 10); }; function scrollBtn(){ 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; }, 10); }; //================主要代码区============ function createBtn(){ if($("scrollMars-troy") && hasScroll() == true){//如果有滚动条,并且存在滚动按钮 $('scrollMars-troy').style.top=(getClientHeight()/3)+'px';//调整按钮位置 }else if($("scrollMars-troy") && hasScroll() == false){//如果没有滚动条，但是有按钮 $("scrollMars-troy").remove($("scrollMars-troy"));//删除按钮 }; if (hasScroll() == false && !$("scrollMars-troy")) {//如果没有滚动条,并且没有按钮 return false; }else if(hasScroll() == true && !$("scrollMars-troy")){//如果有滚动条，并且没有按钮 createElement("div", "scrollMars-troy",MarsCSS, document.documentElement); $("scrollMars-troy").innerHTML = "<div id='goTop-troy' class='Top-and-Btn'></div><div id='goBtn-troy' class='Top-and-Btn'></div>"; $('scrollMars-troy').style.top=(getClientHeight()/3)+'px'; $("goTop-troy").style.cssText = BottonCSS; $("goBtn-troy").style.cssText = BottonCSS; $("goTop-troy").innerHTML = "顶<br/>部"; $("goBtn-troy").innerHTML = "底<br/>部"; addEvent($("goTop-troy"), "click",function() {scrollTop()}); addEvent($("goBtn-troy"), "click",function() {scrollBtn()}); addEvent(window, "resize",function() {$('scrollMars-troy').style.top=(getClientHeight()/3)+'px';}); addEvent($("scrollMars-troy"), "mouseover",function() {movein()}); addEvent($("scrollMars-troy"), "mouseout",function() {moveout()}); 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";}); moveout();//页面加载完成，默认3s后隐藏到边栏 }; }; //================样式区============ //遮罩层样式 var MarsCSS='\ width:100px;\ height:120px;\ position:fixed;\ right:20px;\ z-index:99999;\ ' //两个按钮样式 var BottonCSS='\ 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;\ font-family:"微软雅黑";\ z-index:9999;\ ' //================执行区============ addEvent(window.top,"load",function(){createBtn()}); addEvent(window.top, "resize",function(){createBtn()}); })()
