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.
当前为 2024-07-24 提交的版本，查看最新版本。
换行
// ==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;'
);
欢迎访问Greasy Fork镜像
