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

(function () {
    'use strict';

    let lmUpDiv = document.createElement("div");
    let bottom = 30 - document.documentElement.scrollTop;
    lmUpDiv.id = "lm-up-div";
    lmUpDiv.style.cssText = "position: absolute; z-index: 999999; background-color: #fff; bottom: " + bottom + "px; right: 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: 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: absolute; z-index: 999999; background-color: #fff; bottom: " + bottom + "px; right: 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: 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);

    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 = (30 - top) + "px";
            up.style.display = "block";
            down.style.display = "none";
        } else if (top < 30) {
            up.style.display = "none";
            down.style.bottom = (30 - top) + "px";
            down.style.display = "block";
        } else {
            up.style.bottom = (70 - top) + "px";
            up.style.display = "block";
            down.style.bottom = (30 - top) + "px";
            down.style.display = "block";
        }
    });
})();