滚到页面顶部或底部

快速滚到页面顶部或底部
目前为 2019-02-18 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         滚到页面顶部或底部
// @namespace    https://gf.qytechs.cn/zh-CN/users/188704
// @version      0.2
// @description  快速滚到页面顶部或底部
// @author       linmii
// @include      *
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let lmUpDiv = document.createElement("div");
    lmUpDiv.id = "lm-up-div";
    lmUpDiv.style.cssText = "position: fixed; z-index: 999999; background-color: #fff; bottom: 70px; 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: fixed; z-index: 999999; background-color: #fff; bottom: 30px; 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.display = "block";
            down.style.display = "none";
        } else if (top < 30) {
            up.style.display = "none";
            down.style.display = "block";
        } else {
            up.style.display = "block";
            down.style.display = "block";
        }
    });
})();
欢迎访问Greasy Fork镜像
