☰

Scroll to top button

Adds a button to scroll to the top of the page

As of 2024-05-19. See the latest version.

// ==UserScript==
// @name         Scroll to top button
// @version      0.1
// @description  Adds a button to scroll to the top of the page
// @author       Bins
// @license      MIT
// @match        *://*/*
// @grant        none
// @namespace https://greasyfork.org/users/757542
// ==/UserScript==

(function() {
    'use strict';

    // Create the button
    var button = document.createElement("button");
    button.innerHTML = "⬆"; // Unicode for up arrow
    button.style.position = "fixed";
    button.style.bottom = "20px";
    button.style.right = "20px";
    button.style.zIndex = "9999";
    button.style.fontSize = "24px";
    button.style.width = "50px";
    button.style.height = "50px";
    button.style.backgroundColor = "#4CAF50";
    button.style.border = "none";
    button.style.color = "white";
    button.style.textAlign = "center";
    button.style.textDecoration = "none";
    button.style.borderRadius = "50%";
    button.style.boxShadow = "0 2px 5px 0 rgba(0,0,0,0.26),0 2px 10px 0 rgba(0,0,0,0.16)";
    button.style.transition = "background-color 0.3s";

    // Change color on hover
    button.onmouseover = function() {
        button.style.backgroundColor = "#45a049";
    }
    button.onmouseout = function() {
        button.style.backgroundColor = "#4CAF50";
    }

    // Add the button to the body of the document
    document.body.appendChild(button);

    // When the button is clicked, scroll to the top of the page
    button.addEventListener ("click", function() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
})();