回到顶部/底部

快速滚到页面顶部或底部

// ==UserScript==
// @name         回到顶部/底部
// @namespace    https://greasyfork.org/zh-CN/users/188704
// @version      0.4
// @description  快速滚到页面顶部或底部
// @author       linmii
// @include      *
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    if (document.documentElement.offsetHeight > document.documentElement.clientHeight) {
        let top = document.documentElement.scrollTop;
        let lmUpDiv = document.createElement("div");
        lmUpDiv.id = "lm-up-div";
        lmUpDiv.style.cssText = "position: fixed; z-index: 999999; background-color: #fff; bottom: 70px; left: 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; white-space: nowrap; line-height: 30px; text-align: center; border: solid 1px #999999; color: #999999; cursor: pointer; display: " + (top > 30 ? "block" : "none") + "; opacity: 0.8;";
        lmUpDiv.innerText = "顶部";
        lmUpDiv.onclick = function () {
            document.documentElement.scrollTop = 0;
        };

        let lmDownDiv = document.createElement("div");
        lmDownDiv.id = "lm-down-div";
        lmDownDiv.style.cssText = "position: fixed; z-index: 999999; background-color: #fff; bottom: 30px; left: 30px; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; white-space: nowrap; line-height: 30px; text-align: center; border: solid 1px #999999; color: #999999; cursor: pointer; display: " + (top + document.documentElement.clientHeight === document.documentElement.offsetHeight ? "none" : "block") + "; opacity: 0.8;";
        lmDownDiv.innerText = "底部";
        lmDownDiv.onclick = function () {
            document.documentElement.scrollTop = document.documentElement.offsetHeight;
        };

        let body = document.querySelector("body");
        body.appendChild(lmUpDiv);
        body.appendChild(lmDownDiv);

        bindScrollEvent();
    }
})();

function bindScrollEvent() {
    window.addEventListener("scroll", function () {
        let up = document.querySelector("#lm-up-div");
        let down = document.querySelector("#lm-down-div");
        let top = document.documentElement.scrollTop;
        if (top + document.documentElement.clientHeight === document.documentElement.offsetHeight) {
            up.style.bottom = "30px";
            up.style.display = "block";
            down.style.display = "none";
        } else if (top < 30) {
            up.style.display = "none";
            down.style.display = "block";
        } else {
            up.style.bottom = "70px";
            up.style.display = "block";
            down.style.display = "block";
        }
    });
}