☰

Squabbles.io Scroll-to-Top Button

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

// ==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();
})();