Scroll to Top Button

Scroll to Top button that appears after scrolling down 20%
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Scroll to Top Button
// @namespace    U2Nyb2xsIHRvIFRvcCBCdXR0b24
// @version      2.3
// @description  Scroll to Top button that appears after scrolling down 20%
// @author       smed79
// @license      GPLv3
// @icon         https://i25.servimg.com/u/f25/11/94/21/24/scroll10.png
// @match        *://*/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // --- Create the host container ---
  const host = document.createElement('div');
  host.id = 'r2t-simple-btn';
  
  // Attach shadow DOM to perfectly isolate CSS from the website
  const shadow = host.attachShadow({ mode: 'closed' });

  // Add the CSS and HTML
  shadow.innerHTML = `
    <style>
      :host {
          all: initial;
          position: fixed;
          bottom: 25px;
          right: 25px;
          z-index: 2147483647;
          pointer-events: none; /* Let clicks pass through the invisible host */
      }
      .circle {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.55);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          pointer-events: auto; /* Re-enable clicks for the circle itself */
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          visibility: hidden;
          transform: translateY(15px);
          transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
          -webkit-tap-highlight-color: transparent;
      }
      .circle.show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }
      .circle:hover {
          background: rgba(0, 0, 0, 0.85);
      }
      .glyph {
          box-sizing: border-box;
          display: block;
          width: 12px;
          height: 12px;
          border-top: 4px solid #fff;
          border-left: 4px solid #fff;
          border-radius: 2px;
          transform: rotate(45deg) translate(2px, 2px);
          pointer-events: none;
      }
    </style>
    <div class="circle">
      <div class="glyph"></div>
    </div>
  `;

  const circle = shadow.querySelector('.circle');

  // Inject into the page
  (document.documentElement || document.body).appendChild(host);

  // --- Scroll Logic ---
  window.addEventListener('scroll', () => {
      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
      if (scrollHeight > 0) {
          const scrollPercent = window.scrollY / scrollHeight;
          if (scrollPercent > 0.20) {
              circle.classList.add('show');
          } else {
              circle.classList.remove('show');
          }
      }
  }, { passive: true });

  // --- Click Logic ---
  circle.addEventListener('click', () => {
      try { 
          window.scrollTo({ top: 0, behavior: 'smooth' }); 
      } catch (err) { 
          window.scrollTo(0, 0); 
      }
  });

})();