☰

Scroll to Top/bottom for mobile phone

A set of floating buttons on the screen that quickly scroll to the top and bottom of the page, and scroll up/down one page.

当前为 2025-02-21 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Scroll to Top/bottom for mobile phone
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  A set of floating buttons on the screen that quickly scroll to the top and bottom of the page, and scroll up/down one page.
// @author       Kamiya Minoru
// @match        *://*/*
// @exclude      *://www.google.com/*
// @exclude      *://www.google.com.tw/*
// @exclude      *://www.google.co.jp/*
// @exclude      https://www.bilibili.com/
// @exclude      https://*.microsoft/*
// @exclude      https://gemini.google.com/*
// @exclude      https://chatgpt.com/
// @exclude      https://claude.ai/*
// @exclude      https://www.perplexity.ai/*
// @exclude      https://chat.deepseek.com/*
// @exclude      https://www.twitch.tv/
// @noframes
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Create a Trusted Types policy
    const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
        createHTML: (string) => string
    });

    // Create a container for the buttons
    var container = document.createElement('div');
    container.style.position = 'fixed';
    container.style.right = '2px';
    container.style.bottom = '90px';
    container.style.zIndex = '9999'; // Increased zIndex value
    document.body.appendChild(container);

    // Function to create a button
    function createButton(innerHTML, onClick) {
        var button = document.createElement('div');
        button.innerHTML = escapeHTMLPolicy.createHTML(innerHTML); // 使用 TrustedHTML
        button.style.width = '30px';
        button.style.height = '30px';
        button.style.cursor = 'pointer';
        button.style.backgroundColor = 'transparent';
        button.style.color = 'grey';
        button.style.textAlign = 'center';
        button.style.fontSize = '30px';
        button.style.borderRadius = '0px';
        button.style.userSelect = 'none';
        button.style.marginBottom = '2px'; // Adjusted margin to 2px to prevent overlap
        button.style.opacity = '0.5'; // Set opacity to 0.5 for 50% transparency
        button.style.filter = 'drop-shadow(0 0 0 grey)';
        button.addEventListener('click', onClick);
        container.appendChild(button);
    }

    // Create the buttons
    createButton('↑', function() {
        window.scrollBy({ top: -window.innerHeight, behavior: 'instant' });
    });
    createButton('↓', function() {
        window.scrollBy({ top: window.innerHeight, behavior: 'instant' });
    });
    createButton('⇅', function() {
        if (window.scrollY === 0) {
            window.scrollTo({ top: document.body.scrollHeight, behavior: 'instant' });
        } else {
            window.scrollTo({ top: 0, behavior: 'instant' });
        }
    });
})();