☰

Scroll to Top Button

Adds a scroll to top button at the bottom right of the page when scrolled to the bottom, and hides it at the top.

Verze ze dne 24. 07. 2024. Zobrazit nejnovější verzi.

// ==UserScript==
// @name        Scroll to Top Button
// @namespace   sttb-ujs-dxrk1e
// @description  Adds a scroll to top button at the bottom right of the page when scrolled to the bottom, and hides it at the top.
// @icon https://i.imgur.com/FxF8TLS.png
// @match       *://*/*
// @grant       none
// @version     1.5
// @author      DXRK1E
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create the button
    const scrollToTopButton = document.createElement('button');
    scrollToTopButton.innerText = '↑';
    scrollToTopButton.style.position = 'fixed';
    scrollToTopButton.style.bottom = '20px';
    scrollToTopButton.style.right = '20px';
    scrollToTopButton.style.padding = '10px 20px';
    scrollToTopButton.style.fontSize = '16px';
    scrollToTopButton.style.backgroundColor = '#333';
    scrollToTopButton.style.color = '#FFF';
    scrollToTopButton.style.border = 'none';
    scrollToTopButton.style.borderRadius = '50%';
    scrollToTopButton.style.cursor = 'pointer';
    scrollToTopButton.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
    scrollToTopButton.style.opacity = '0';
    scrollToTopButton.style.visibility = 'hidden';
    scrollToTopButton.style.zIndex = '1000';
    scrollToTopButton.style.transition = 'opacity 0.3s ease-in-out, visibility 0.3s ease-in-out';

    // Append the button to the body
    document.body.appendChild(scrollToTopButton);

    // Function to handle scrolling
    function handleScroll() {
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        const scrolledFromTop = window.scrollY;
        const minimumPageHeightToShowButton = 1500; // Minimum page height to show the button

        // Check if the page is tall enough to warrant the button
        if (scrollableHeight < minimumPageHeightToShowButton) {
            scrollToTopButton.style.visibility = 'hidden';
            scrollToTopButton.style.opacity = '0';
            return; // Exit early if the page is too short
        }

        if (scrolledFromTop + window.innerHeight >= scrollableHeight - 1) {
            scrollToTopButton.style.visibility = 'visible';
            scrollToTopButton.style.opacity = '1';
        } else {
            scrollToTopButton.style.opacity = '0';
            scrollToTopButton.style.visibility = 'hidden';
        }
    }

    // Function to scroll to top
    function scrollToTop() {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    // Add event listeners
    window.addEventListener('scroll', handleScroll);
    window.addEventListener('resize', handleScroll);  // Recalculate on resize
    handleScroll();  // Initial check
    scrollToTopButton.addEventListener('click', scrollToTop);
    console.log("Scrol to Top Button: loaded");
})();

// Ignore this; it's just a credits screen that appears on the devtools console only.
console.log(
    '%cDarkPulse\n%cUSERSCRIPT: %cScroll to Top Button\n%cDeveloped by %cDXRK1E',
    'color: #8C52FF; font-size: 36px; font-weight: bold; margin: 20px 0;',
    'color: white; font-size: 20px; font-weight: bold; margin: 20px 0 0 20px;',
    'color: #B0BFFB; font-size: 20px; font-weight: bold; margin: 20px 0;',
    'color: white; font-size: 16px; margin: 20px 0 0 20px;',
    'color: #615EFC; font-size: 16px; font-weight: bold; margin: 20px 0;'
);