Squabbles.io Scroll-to-Top Button

Adds a button to every page to take you back up to the top.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

You will need to install an extension such as Tampermonkey to install this script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==UserScript==
// @name         Squabbles.io Scroll-to-Top Button
// @namespace  https://github.com/waaamb/userscripts
// @version      0.2.1
// @description  Adds a button to every page to take you back up to the top.
// @author       Waaamb
// @match        *://*.squabbles.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=squabbles.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /* Settings */
    /* These are settings variables to enable features.
    /* Keep in mind they'll be erased if the script is updated.              */

    const btnScrollToTopSize = '3rem';

    // Some constants
    const app = document.querySelector('#app');

    function addBtnScrollToTop () {

        // Create the scroll-to-top button...
        let newBtnScrollToTop = document.createElement('button');
        newBtnScrollToTop.id = 'btnScrollToTop';
        const btnClasses = ['btn', 'btn-lg', 'rounded-circle', 'btn-secondary',
                         'position-fixed', 'bottom-0', 'end-0', 'm-3'];
        newBtnScrollToTop.classList.add(...btnClasses);

        // ...and add its icon
        let newBtnScrollToTopIcon = document.createElement('i');
        const iconClasses = ['fa-solid', 'fa-up'];
        newBtnScrollToTopIcon.classList.add(...iconClasses);
        newBtnScrollToTop.appendChild(newBtnScrollToTopIcon);

        // Add it to the DOM
        document.body.appendChild(newBtnScrollToTop);

        // Style the button *after* it's been messed with by the DOM
        const btnScrollToTop = document.querySelector("#btnScrollToTop");
        btnScrollToTop.style.display = 'none';
        btnScrollToTop.style.width = btnScrollToTopSize;
        btnScrollToTop.style.height = btnScrollToTopSize;
        btnScrollToTop.style.padding = '0';
        const btnScrollToTopIcon = btnScrollToTop.querySelector('i');
        btnScrollToTopIcon.style.margin = 'auto';
        btnScrollToTop.addEventListener('click', function() {
            app.scrollTo({top: 0, left: 0, behavior: 'smooth'});
        });

        // Show the button after the page is scrolled down a little
        app.onscroll = function () {
            if (app.scrollTop > 20) {
                btnScrollToTop.style.display = 'flex';
            }
            else {
                btnScrollToTop.style.display = 'none';
            }
        };
    }

    addBtnScrollToTop();
})();