返回顶部和底部

在网页生成返回顶部和底部按钮，点击按钮即可返回顶部或底部。

// ==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();
})();