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. })();