在网页生成返回顶部和底部按钮,点击按钮即可返回顶部或底部。
// ==UserScript== // @name 返回顶部和底部 // @version 1.1.2 // @description 在网页生成返回顶部和底部按钮,点击按钮即可返回顶部或底部。 // @author Johnny Li // @license MIT // @match *://*/* // @grant GM_info // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @require http://code.jquery.com/jquery-1.11.0.min.js // @require https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js // @namespace https://www.chlung.com/ // ==/UserScript== (function () { 'use strict'; var TBLink = function () { var $ = $ || window.$; var $doc = $(document); var $win=$(window); var CreateHtml = function () { var html = '<div id="goTopBottom"><div class="gotop" style="display: none; opacity: 0;"><a class="toplink" title="返回顶部">Top</a></div><div class="gobottom" style="display: none; opacity: 0;"><a class="bottomlink" title="返回底部">Bottom</a></div></div>'; $("html body").append(html); // setTimeout(function () { // var position = GM_getValue("tb_pos"); // if (position && position['div']) { // var _position$div = position['div'], // x = _position$div.x, // y = _position$div.y; // $('.draggable').attr('data-x', x).attr('data-y', y).css({ // 'transform': "translate(" + x + "px, " + y + "px)", // '-webkit-transform': "translate(" + x + "px, " + y + "px)" // }); // } // }, 100); }; var CreateStyle = function () { var style = '#goTopBottom{position:fixed;bottom:75px;right:15px;z-index:999999}#goTopBottom .gotop{display:none;opacity:0;margin-bottom:10px}#goTopBottom .gotop .toplink{display:block;width:40px;height:40px;cursor:pointer;overflow:hidden;text-indent:-999em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAARVBMVEUAAABwcHBwcHBwcHBvb29wcHBwcHBvb29wcHBwcHBvb29wcHBvb29vb29wcHBwcHBvb29wcHBwcHBwcHBvb29vb29wcHBGBxOeAAAAFXRSTlMAP39fP88vfw+vX+9v39+/7x9vn885opKGAAABnElEQVR4Xo2VjY4CIRCDK7i6/t9f9/0f9Q7JzTBTTOwmSAY+ajPKAljLffsTty7aZBPdvtB0WKwSyIaolhVYjaCPOnMGKL3AsBCM0kLFLZVoZmxz1QPRXNNLmRjLDiae4wwWW0OQUy/MW0Ar6gpyRQjmYCk+KVaCwRY499MS4nZKakpGjMAOL7QbMRjxBtLtMXbwumvat8E/2+TqodgQ6T8nyb1CRxiXPhpEpsaQQxYy2F0OVY4KfRFdDkA1IiOvCOD8MgtDwYnuIyLYUjBmPwNzhiSnWSpM1S4aShb2Ko1IPozxe/doHkFn6Spijz2H+vwP+bqogDLUvjgTCWX0iy3H0h4DPstTP3LDyNU3+WuRtmHIYj11ZG8pG0FDghLih7tXR+gA1SVtwUa5g2IWRkTjUxAHSEOk7Mj06hOLjRxdKBAE0L7ID0aqTH1JNu7CgSvHUkobvsPbTLvvHF/deo54EN2nI56mbM/8TaSCpNPECcZ9e1sdPKGEMHK4QhVYtOrd7dyA8gRgXcRAuuHYaUVTfaSz+4yOGVAB/ALe77YRMP804gAAAABJRU5ErkJggg==) no-repeat center;background-size:40px 40px}#goTopBottom .gobottom{display:none;opacity:0}#goTopBottom .gobottom .bottomlink{display:block;width:40px;height:40px;cursor:pointer;overflow:hidden;text-indent:-999em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABFUExURQAAAHBwcHBwcHBwcG9vb3BwcHBwcG9vb3BwcHBwcG9vb3BwcG9vb29vb3BwcHBwcG9vb3BwcHBwcHBwcG9vb29vb3BwcEYHE54AAAAVdFJOUwA/f18/zy9/D69f72/f37/vH2+fzzmikoYAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIVSURBVEhLhZaHYsMwCEQVO3s0Xc7/f2oPOATIbvviaAAnNGwnDcyXl7Bo+Vq0lgJft7F4zhLfzl1APzDZBsvhDMklRZrMBVqF1zhgVmur6awZuGFqOq2V/w/eGhvCanB2BluWBBZUhlj0I+sUSQTUslONTRtRFGTrxFo9JjH6aXxN02kCp4mGrpMCE0sidvZ6xkJ2erMun9YdBZB4anqkiuUTCQnJWuBZqqhkYZoUQUk1F4mbu9ckQvJUCT3dH3viNUg7pvYaAuPCNRJ0iySPpfAoUULozkECR5b108+5Ns5FRzV0tr33LbfJNH1Q0BruGXwOdCuLpnaWl70OBua6nCLZ1swQZI1OTBpuXGmudDjjxMCVoQSvE8W2TSKSZDOPKBjq/pDQgtGSxnMEesMMpw+6ButIPsTJlR/kgJrjTToa4WGo0+sio3tgihX1XASTI8+2YuPV5wnn463k5oJRQuKr10oK2493NxnR/GUttIjWrkR5Ku+7/Y54w+p7D8ElE+vDxHMysDM/MEnwv0TGFglzkOihpRvRLdaxLBEGrFNMwMLl6xPTiAi2lhEnYuS1qNE9Ug+xpPwcJEKRMIMuv/rQMwtudDUY1kaJ06cdYdEqoJst/guyClyZu7s92chYQoupI6HzGJ5uhrFOwKC2BX9IWn57RuTY6n35q3Qub1wnEoVYOBz1pvt8sJ/ogqJ8m86t/QAimLYRwPIUvwAAAABJRU5ErkJggg==) no-repeat center;background-size:40px 40px}'; GM_addStyle(style); } var GoTB = function () { var upperLimit = 100; var scrollSpeed = 500; var fadeSpeed = 300; var $top = $("#goTopBottom .gotop"); var $bottom = $("#goTopBottom .gobottom"); if (getScrollTop() > upperLimit) { $top.stop().fadeTo(0, 1, function () { $top.show(); }); } if (getScrollTop() + $(window).height() < $doc.height() - upperLimit) { $bottom.stop().fadeTo(0, 1, function () { $bottom.show(); }); } $doc.scroll(function () { if (getScrollTop() > upperLimit) { $top.stop().fadeTo(fadeSpeed, 1, function () { $top.css("visibility","visible"); }); } else { $top.stop().fadeTo(fadeSpeed, 0, function () { $top.css("visibility","hidden") }); } if (getScrollTop() + $(window).height() < $doc.height() - upperLimit) { $bottom.stop().fadeTo(fadeSpeed, 1, function () { $bottom.css("visibility","visible"); }); } else { $bottom.stop().fadeTo(fadeSpeed, 0, function () { $bottom.css("visibility","hidden"); }); } }); $("#goTopBottom div a").click(function () { var $this = $(this); var clsName = $this.attr("class"); switch (clsName) { case "toplink": $('html, body').animate({ scrollTop: 0 }, scrollSpeed); break; case "bottomlink": var docHeight = $doc.height(); $('html, body').animate({ scrollTop: docHeight }, scrollSpeed); break; default: break; } return false; }); } var getScrollTop = function () { var scrollTop = $doc.scrollTop() || $('html,body').scrollTop(); return scrollTop; } /** * 拖拽 */ function dragging() { var position = GM_getValue("gtb_pos") || {}; $("#goTopBottom div a").off(".gtb").on({ "mouseover.gtb": function () { //$(this).css("cursor","move"); }, "mousedown.gtb": function (el) { var move = true; var $gtbBox = $("#goTopBottom"); var x = el.pageX - $gtbBox.offset().left; var y = el.pageY - $gtbBox.offset().top; $doc.on({ "mousemove.gtb": function (docEl) { if (move) { var x1=docEl.pageX - x; var y1=docEl.pageY - y; $gtbBox.offset({ left: x1, top:y1 }); } }, "mouseup.gtb": function () { move = false; $doc.off(".gtb"); } }); } }); } this.init = function () { CreateHtml(); dragging(); CreateStyle(); GoTB(); } } var tbl = new TBLink(); tbl.init(); })();