☰

Scroll to Top

Add a button to scroll to the top of the page

  1. // ==UserScript==
  2. // @name         Scroll to Top
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Add a button to scroll to the top of the page
  6. // @author       Irushia
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @exclude      http*://*.youtube.com/*
  10. // @icon         data:image/png;base64,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
  11. // @run-at       document-start
  12. // @grant        GM_registerMenuCommand
  13. // ==/UserScript==
  14.  
  15. (function () {
  16.     document.addEventListener("scroll", insertButton, {
  17.         capture: true,
  18.         once: true,
  19.     });
  20.  
  21.     function insertButton() {
  22.         const SELECTOR_ID = "scrollTop-btn";
  23.         const btn = document.createElement("button");
  24.         btn.id = SELECTOR_ID;
  25.         Object.assign(btn.style, {
  26.             position: "fixed",
  27.             cursor: "pointer",
  28.             bottom: 0,
  29.             left: "20%",
  30.             visibility: "hidden",
  31.             opacity: 0.5,
  32.             width: "40%",
  33.             height: "40px",
  34.             border: "none",
  35.             outline: "none",
  36.             "z-index": 1,
  37.             "border-radius": "100% 100% 0 0",
  38.             "font-size": "16px",
  39.             "background-color": "rgba(0,0,0,.3)",
  40.             "box-shadow":
  41.             "0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .4)",
  42.         });
  43.         btn.addEventListener("click", () => {
  44.             window.scrollTo({
  45.                 top: 0,
  46.                 behavior: "smooth", // "instant",
  47.             });
  48.         });
  49.         const arrow = document.createElement("span");
  50.         Object.assign(arrow.style, {
  51.             border: "solid white",
  52.             "border-width": "0 3px 3px 0",
  53.             display: "inline-block",
  54.             padding: "4px",
  55.             "vertical-align": "middle",
  56.             transform: "rotate(-135deg)",
  57.         });
  58.         btn.append(arrow);
  59.         document.body.append(btn);
  60.         const cssRule = `
  61.             #${SELECTOR_ID}:hover {
  62.                 opacity: 1 !important;
  63.                 background-color: rgba(0,0,0,.6) !important;
  64.                 }
  65.         `;
  66.         const styleElement = document.createElement("style");
  67.         styleElement.textContent = cssRule;
  68.         document.head.appendChild(styleElement);
  69.  
  70.         const scrollTop_btn = document.getElementById(SELECTOR_ID);
  71.         let sOld;
  72.         window.addEventListener("scroll", () => {
  73.             const sCurr = document.documentElement.scrollTop > window.innerHeight / 4;
  74.             if (sCurr == sOld) return;
  75.             sOld = sCurr;
  76.             scrollTop_btn.style.visibility = sCurr ? "visible" : "hidden";
  77.         });
  78.     }
  79. })();