Scroll to Top Button

Adds a customizable scroll-to-top button near the page bottom.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name        Scroll to Top Button
// @namespace   sttb-ujs-dxrk1e
// @description Adds a customizable scroll-to-top button near the page bottom.
// @icon        https://i.imgur.com/FxF8TLS.png
// @match       *://*/*
// @grant       none
// @version     3.1.0
// @author      DXRK1E
// @license     MIT
// @noframes
// ==/UserScript==

(function () {
    'use strict';

    const _cfg = {
        b: {
            sz: '45px', fs: '18px', bg: '#3a3a3a', hBg: '#555', clr: '#f5f5f5',
            br: '50%', pos: { b: '25px', r: '25px' }, sh: '0 4px 12px rgba(0,0,0,0.4)',
            trMs: 300, z: 2147483647,
            svg: { w: '20px', h: '20px', vb: '0 0 16 16', pd: 'M8 3L14 9L12.6 10.4L8 5.8L3.4 10.4L2 9L8 3Z' },
            lbl: 'Scroll to Top'
        },
        bh: { shThrPx: 300, dDelMs: 150, smScr: true, natSmScr: false },
        sc: { durMs: 800, eas: 'easeInOutCubic' }
    };

    const _eas = {
        linear: t => t, easeInQuad: t => t * t, easeOutQuad: t => t * (2 - t),
        easeInOutQuad: t => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
        easeInCubic: t => t * t * t, easeOutCubic: t => (--t) * t * t + 1,
        easeInOutCubic: t => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
        easeInQuart: t => t * t * t * t, easeOutQuart: t => 1 - (--t) * t * t * t,
        easeInOutQuart: t => t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t,
        easeInQuint: t => t * t * t * t * t, easeOutQuint: t => 1 + (--t) * t * t * t * t,
        easeInOutQuint: t => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,
        easeInExpo: t => (t === 0) ? 0 : Math.pow(2, 10 * (t - 1)),
        easeOutExpo: t => (t === 1) ? 1 : 1 - Math.pow(2, -10 * t),
        easeInOutExpo: t => t === 0 ? 0 : t === 1 ? 1 : t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2
    };

    const _bid = 'estb-dxrk1e-s';
    const _sid = 'estb-styles-dxrk1e-s';

    let _btn = null;
    let _sto = null;
    let _raf = null;

    function _gSP() { return window.scrollY || document.documentElement.scrollTop; }

    function _deb(fn, wt) {
        return function (...a) {
            clearTimeout(_sto);
            _sto = setTimeout(() => { fn.apply(this, a); }, wt);
        };
    }

    function _gEF() { return _eas[_cfg.sc.eas] || _eas.linear; }

    function _injS() {
        if (document.getElementById(_sid)) return;
        const css = `
            #${_bid}{position:fixed;bottom:${_cfg.b.pos.b};right:${_cfg.b.pos.r};width:${_cfg.b.sz};height:${_cfg.b.sz};background-color:${_cfg.b.bg};color:${_cfg.b.clr};border:none;border-radius:${_cfg.b.br};cursor:pointer;box-shadow:${_cfg.b.sh};opacity:0;visibility:hidden;z-index:${_cfg.b.z};transition:opacity ${_cfg.b.trMs}ms ease-in-out,visibility ${_cfg.b.trMs}ms ease-in-out,background-color ${_cfg.b.trMs}ms ease-in-out,transform ${_cfg.b.trMs}ms ease-in-out;display:flex;align-items:center;justify-content:center;padding:0;transform:scale(1);outline:none;will-change:opacity,transform;overflow:hidden;}
            #${_bid}:hover{background-color:${_cfg.b.hBg};transform:scale(1.1);}
            #${_bid}:active{transform:scale(0.95);}
            #${_bid}.visible{opacity:1;visibility:visible;}
            #${_bid} svg{display:block;width:${_cfg.b.svg.w};height:${_cfg.b.svg.h};fill:currentColor;}
        `;
        const se = document.createElement('style');
        se.id = _sid; se.textContent = css;
        (document.head || document.documentElement).appendChild(se);
    }

    function _crB() {
        const b = document.createElement('button');
        b.id = _bid; b.setAttribute('aria-label', _cfg.b.lbl); b.setAttribute('title', _cfg.b.lbl); b.type = 'button';
        b.innerHTML = `<svg width="${_cfg.b.svg.w}" height="${_cfg.b.svg.h}" viewBox="${_cfg.b.svg.vb}" xmlns="http://www.w3.org/2000/svg"><path d="${_cfg.b.svg.pd}" /></svg>`;
        b.addEventListener('click', (e) => { e.preventDefault(); _scT(); });
        return b;
    }

    function _smS() {
        const sPos = _gSP(); if (sPos <= 0) return;
        const sT = performance.now(); const dur = _cfg.sc.durMs; const easing = _gEF();
        if (_raf) { cancelAnimationFrame(_raf); }
        function step(cT) {
            const el = cT - sT; const prog = Math.min(el / dur, 1);
            const eP = easing(prog); const nPos = sPos * (1 - eP);
            window.scrollTo(0, nPos);
            if (prog < 1) { _raf = requestAnimationFrame(step); } else { _raf = null; }
        }
        _raf = requestAnimationFrame(step);
    }

    function _scT() {
        if (_cfg.bh.smScr) {
            if (_cfg.bh.natSmScr && 'scrollBehavior' in document.documentElement.style) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            } else { _smS(); }
        } else { window.scrollTo({ top: 0, behavior: 'auto' }); }
    }

    function _hSE() {
        if (!_btn) return;
        const sPos = _gSP();
        if (sPos > _cfg.bh.shThrPx) { _btn.classList.add('visible'); }
        else { _btn.classList.remove('visible'); }
    }

    function _init() {
        if (document.getElementById(_bid) || !document.body) return;
        try {
            _injS(); _btn = _crB(); document.body.appendChild(_btn);
            const dBounce = _deb(_hSE, _cfg.bh.dDelMs);
            window.addEventListener('scroll', dBounce, { passive: true });
            window.addEventListener('resize', dBounce, { passive: true });
            const mObs = new MutationObserver(dBounce);
            mObs.observe(document.body, { childList: true, subtree: true, attributes: false });
            _hSE();
        } catch (e) { console.error("STTB Error:", e); }
    }

    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', _init); }
    else { _init(); }

})();