☰

Scroll to Top/bottom

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 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Scroll to Top/bottom
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @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.
  6. // @author       Kamiya Minoru
  7. // @match        *://*/*
  8. // @exclude      *://www.google.com/*
  9. // @exclude      *://www.google.com.tw/*
  10. // @exclude      *://www.google.co.jp/*
  11. // @exclude      https://www.bilibili.com/
  12. // @exclude      https://*.microsoft/*
  13. // @exclude      https://gemini.google.com/*
  14. // @exclude      https://chatgpt.com/
  15. // @exclude      https://claude.ai/*
  16. // @exclude      https://www.perplexity.ai/*
  17. // @exclude      https://chat.deepseek.com/*
  18. // @exclude      https://www.twitch.tv/
  19. // @noframes
  20. // @grant        none
  21. // @license      MIT
  22. // ==/UserScript==
  23.  
  24. (function() {
  25.     'use strict';
  26.  
  27.     // Create a Trusted Types policy
  28.     const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
  29.         createHTML: (string) => string
  30.     });
  31.  
  32.     // Create a container for the buttons
  33.     var container = document.createElement('div');
  34.     container.style.position = 'fixed';
  35.     container.style.right = '10px';
  36.     container.style.top = '185px';
  37.     container.style.transform = 'translateY(-50%)';
  38.     container.style.zIndex = '9999999';
  39.     document.body.appendChild(container);
  40.  
  41.     // Function to create a button
  42.     function createButton(innerHTML, onClick, tooltip) {
  43.         var button = document.createElement('div');
  44.         button.innerHTML = escapeHTMLPolicy.createHTML(innerHTML); // 使用 TrustedHTML
  45.         button.style.width = '30px';
  46.         button.style.height = '30px';
  47.         button.style.cursor = 'pointer';
  48.         button.style.backgroundColor = 'transparent';
  49.         button.style.color = 'grey';
  50.         button.style.textAlign = 'center';
  51.         button.style.fontSize = '24px';
  52.         button.style.borderRadius = '50%';
  53.         button.style.userSelect = 'none';
  54.         button.style.marginBottom = '8px';
  55.         button.style.opacity = '0.4';
  56.         button.style.transition = 'all 0.3s';
  57.         button.style.display = 'flex';
  58.         button.style.alignItems = 'center';
  59.         button.style.justifyContent = 'center';
  60.         button.style.border = '1px solid grey';
  61.         button.title = tooltip;
  62.         button.addEventListener('click', onClick);
  63.         button.addEventListener('mouseover', function() {
  64.             button.style.opacity = '1';
  65.             button.style.filter = 'drop-shadow(0 0 1px grey)';
  66.             button.style.color = '#FFF';
  67.             if (tooltip === 'Close') {
  68.                 button.style.backgroundColor = 'red';
  69.             }
  70.         });
  71.         button.addEventListener('mouseout', function() {
  72.             button.style.opacity = '0.4';
  73.             button.style.filter = 'drop-shadow(0 0 0 grey)';
  74.             button.style.color = 'grey';
  75.             if (tooltip === 'Close') {
  76.                 button.style.backgroundColor = 'transparent';
  77.             }
  78.         });
  79.         return button;
  80.     }
  81.  
  82.     // Create the buttons
  83.     var topButton = createButton('⮝', function() {
  84.         window.scrollTo({ top: 0, behavior: 'instant' });
  85.     }, "Scroll to Top");
  86.     var pageUpButton = createButton('↑', function() {
  87.         window.scrollBy({ top: -window.innerHeight, behavior: 'instant' });
  88.     }, "Page Up");
  89.     var pageDownButton = createButton('↓', function() {
  90.         window.scrollBy({ top: window.innerHeight, behavior: 'instant' });
  91.     }, "Page Down");
  92.     var bottomButton = createButton('⮟', function() {
  93.         window.scrollTo({ top: document.body.scrollHeight, behavior: 'instant' });
  94.     }, "Scroll to Bottom");
  95.     var closeButton = createButton('╳', function() {
  96.         container.style.display = 'none';
  97.     }, "Close");
  98.  
  99.     // Create the drag button
  100.     var dragButton = createButton('⇅', function() {}, "drag to Move");
  101.     dragButton.style.cursor = 'grab';
  102.  
  103.     dragButton.addEventListener('mousedown', function(e) {
  104.         dragButton.style.cursor = 'grabbing';
  105.         var initialX = e.clientX;
  106.         var initialY = e.clientY;
  107.         var initialLeft = container.offsetLeft;
  108.         var initialTop = container.offsetTop;
  109.  
  110.         function moveAt(pageX, pageY) {
  111.             container.style.left = initialLeft + (pageX - initialX) + 'px';
  112.             container.style.top = initialTop + (pageY - initialY) + 'px';
  113.         }
  114.  
  115.         function onMouseMove(event) {
  116.             moveAt(event.clientX, event.clientY);
  117.         }
  118.  
  119.         document.addEventListener('mousemove', onMouseMove);
  120.  
  121.         document.addEventListener('mouseup', function() {
  122.             dragButton.style.cursor = 'grab';
  123.             document.removeEventListener('mousemove', onMouseMove);
  124.             document.removeEventListener('mouseup', arguments.callee);
  125.         });
  126.     });
  127.  
  128.     dragButton.ondragstart = function() {
  129.         return false;
  130.     };
  131.  
  132.     // Append buttons to the container
  133.     container.appendChild(topButton);
  134.     container.appendChild(pageUpButton);
  135.     container.appendChild(pageDownButton);
  136.     container.appendChild(bottomButton);
  137.     container.appendChild(closeButton);
  138.     container.appendChild(dragButton);
  139. })();