Raw Source
  • Minified Source
BrillyWumsn.com / float buttons 

// ==UserScript==
// @name         float buttons
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  add up/down button at right and close/back button at bottom. based "TopAndDownButtonsEverywhere"
// @author       Brilly Wu
// @match        *://*/*
// @grant        none
// @license      MIT
// @copyright    2021, BrillyWu@msn.com (https://openuserjs.org/users/BrillyWumsn.com)
// @downloadURL https://openuserjs.org/install/BrillyWumsn.com/quickly_buttons.user.js
// @updateURL https://openuserjs.org/meta/BrillyWumsn.com/quickly_buttons.meta.js
// ==/UserScript==

// [1] skip all iframe
if (window.self != window.top) {
    console.log("iframe...");
    return;
}
var buttons = [
    //up
    {
        id: "up",
        label: "\u{1F53A}", position: "{right:0; bottom:53%;}",
        onclick: function () {
            scrollTo(el, 0, speed_by_click);
        },
        onmouseover: move_up,
        onmouseout: function () {
            clearTimeout(t1);
        },
        afterappend: function (btn, scrolled) {
            // if scroll
            btn.style.display = (scrolled > 0) ? "" : "none";
        },
        onwindowscrolled: function (btn, scrolled, diffHeight) {
            btn.style.display = (scrolled > 0) ? "" : "none";
        },
        btn: null
    },
    {
        id: "down",
        label: "\u{1F53B}", position: "{right:0; top:53%;}",
        onclick: function () {
            scrollTo(el, getDocumentHeight(), speed_by_click);
        },
        onmouseover: move_dn,
        onmouseout: function () {
            clearTimeout(t2);
        },
        onwindowscrolled: function (btn, scrolled, diffHeight) {
            btn.style.display = (diffHeight > scrolled) ? "" : "none";
        }
    },
    {
        id: "back", label: "\u{1F519}", position: "{right:52%; bottom:0;}",
        onclick: go_back
    },
    {
        id: "close", label: "\u{2716}", position: "{right:48%; bottom:0;}",
        onclick: closeWin
    }
];


// create element
function ce(n) {
    return document.createElement(n);
} // end of function

// add style
function addStyle(css) {
    var head = document.head || document.getElementsByTagName('head')[0];
    if (head) {
        var style = ce("style");
        style.type = "text/css";
        style.appendChild(document.createTextNode(css));
        head.appendChild(style);
    } // end if
} // end of function

// global variables
var position,
    // figure out if this is moz || IE because they use documentElement
    el = (navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('MSIE') != -1) ? document.documentElement : document.body,
    // timer
    t1, t2,
    // speed by
    speed_by_click = 500, //edit this value
    speed_by_over = 100, //edit this value
    // z-index
    zIindex = 1001; // edit this value

// move up
function move_up() {
    position = document.documentElement.scrollTop || document.body.scrollTop;
    window.scrollTo(0, position - 1);
    t1 = setTimeout(move_up, speed_by_over);
} // end of function

// move downn
function move_dn() {
    position = document.documentElement.scrollTop || document.body.scrollTop;
    window.scrollTo(0, position + 1);
    t2 = setTimeout(move_dn, speed_by_over);
} // end of function

function go_back() {
    window.history.back(-1);
}

function closeWin() {
    try {
        window.opener = window;
        var win = window.open("", "_self");
        win.close();
        //frame的时候
        top.close();
    }
    catch (e) {

    }
}

var font_index = 0;
var fontsize = ["32px", "36px", "42px", "48px"];

function change_fontsize() {
    document.style.fontSize = fontsize[font_index++];
    if (font_index >= 4) font_index = 0;
}

function close_window() {
    closeWin();
}

// document height
function getDocumentHeight() {
    return (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;
} // end of function

// document scroll
function get_scroll(aa) {
    var d = document,
        b = d.body,
        e = d.documentElement,
        c = "client" + aa,
        a = "scroll" + aa;
    return /CSS/.test(d.compatMode) ? (e[c] <= e[a]) : (b[c] <= b[a]);
} // end of function

// calk
function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20,
        newDuration = (typeof (duration) === 'undefined') ? 500 : duration;

    var animateScroll = function () {
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, newDuration);
        element.scrollTop = val;
        if (currentTime < newDuration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
} // end of function

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
};

// add css
function shareCSS() {
    // variables
    var s = '';


    // button class
    s += '.bw_float_btn { -webkit-transition-duration:0.5s linear; -o-transition-duration:0.5s linear; -moz-transition-duration:0.5s linear; transition-duration:0.5s linear; opacity:0.65;';
    s += 'position:fixed; z-index:' + zIindex + '; height:36px; width:36px; cursor:pointer; background: no-repeat scroll 50% 50% rgba(0, 0, 0, 0.7); border-radius:5px 0 0 5px; margin-top:-12px; font-size: 28px;}';

    s += '.bw_float_btn:hover { opacity:1; }';

    // button id
    var ss = '';
    for (const b of buttons) {
        ss = ('#bw_float_' + b.id + ' ' + b.position);
        console.log(ss);
        s += ss;
    }

    // append
    addStyle('' + s);
} // end of function

// main
function create_btn_element() {
    console.log("creating float buttons...");
    // get scroll
    var scrolled,
        h = get_scroll('Height');

    // exit
    if (!h) {
        console.log("no height!");
        return;
    } // end if

    // add css
    shareCSS();

    // if
    if (el) {
        console.log("221");

        for (var b of buttons) {
            console.log(b);
            //create DOM Element
            let btn = ce('span');
            b.btn = btn;
            //setup the new button.
            btn.innerHTML = b.label;
            btn.setAttribute('id', 'bw_float_' + b.id);
            btn.className = 'bw_float_btn';

            // append element
            document.body.appendChild(btn);

            //setup event
            // scroll
            scrolled = window.pageYOffset || document.documentElement.scrollTop;
            if (b.afterappend) b.afterappend(btn, scrolled);
            if (b.onmouseover) btn.addEventListener('mouseover', b.onmouseover, false);
            if (b.onmouseout) btn.addEventListener('mouseout', b.onmouseout, false);
            if (b.onclick) btn.addEventListener('click', b.onclick, false);
        }
        // add event scroll
        window.onscroll = function () {
            var scrolled = window.pageYOffset || document.documentElement.scrollTop,
                diffHeight = document.body.scrollHeight - window.innerHeight;

            for (const b of buttons) {
                if (b.onwindowscrolled) b.onwindowscrolled(b.btn, scrolled, diffHeight);
            }
        }; // end of function
    } // end if
} // end of function

// run it
create_btn_element();