Greasy Fork 还支持 简体中文。

Scroll to Bottom and Top Button

Add buttons to scroll to the bottom and top of the website

  1. // ==UserScript==
  2. // @name Scroll to Bottom and Top Button
  3. // @name:zh 底部和顶部按钮
  4. // @namespace https://greasyfork.org/
  5. // @version 1.1
  6. // @description Add buttons to scroll to the bottom and top of the website
  7. // @description:zh 添加按钮以滚动到网页的底部和顶部
  8. // @author ghzxs
  9. // @match *://*/*
  10. // @license MIT
  11. // @grant none
  12. // @run-at document-end
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17.  
  18. if (window !== window.top) {
  19. return;
  20. }
  21.  
  22. function init() {
  23. if (!document.body) {
  24. // 如果document.body不存在,等待DOMContentLoaded事件
  25. window.addEventListener('DOMContentLoaded', init);
  26. return;
  27. }
  28.  
  29. // Base64-encoded SVG data for bottom icon
  30. const base64BottomIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+';
  31.  
  32. // Base64-encoded SVG data for top icon
  33. const base64TopIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iNSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjUgMTIgMTIgNSAxOSAxMiI+PC9wb2x5bGluZT48L3N2Zz4=';
  34.  
  35. // Common styles for both buttons
  36. const buttonStyles = {
  37. position: 'fixed',
  38. zIndex: '2',
  39. backgroundColor: 'none',
  40. border: '0.5px solid transparent',
  41. borderRadius: '50%',
  42. padding: '4px',
  43. cursor: 'pointer',
  44. display: 'flex',
  45. alignItems: 'center',
  46. justifyContent: 'center'
  47. };
  48.  
  49. // Create the bottom button
  50. const bottomButton = document.createElement('button');
  51. const bottomImg = document.createElement('img');
  52. bottomImg.src = `data:image/svg+xml;base64,${base64BottomIcon}`;
  53. bottomImg.alt = 'Scroll to Bottom';
  54. bottomImg.style.width = '16px';
  55. bottomImg.style.height = '16px';
  56. bottomImg.style.display = 'block';
  57. bottomButton.appendChild(bottomImg);
  58.  
  59. // Apply styles to the bottom button
  60. Object.assign(bottomButton.style, buttonStyles);
  61. bottomButton.style.bottom = '14px';
  62. bottomButton.style.right = '14px';
  63.  
  64. // Add click event listener to scroll to the bottom
  65. bottomButton.addEventListener('click', function() {
  66. window.scrollTo({
  67. top: document.documentElement.scrollHeight || document.body.scrollHeight,
  68. behavior: 'smooth'
  69. });
  70. });
  71.  
  72. // Create the top button
  73. const topButton = document.createElement('button');
  74. const topImg = document.createElement('img');
  75. topImg.src = `data:image/svg+xml;base64,${base64TopIcon}`;
  76. topImg.alt = 'Scroll to Top';
  77. topImg.style.width = '16px';
  78. topImg.style.height = '16px';
  79. topImg.style.display = 'block';
  80. topButton.appendChild(topImg);
  81.  
  82. // Apply styles to the top button
  83. Object.assign(topButton.style, buttonStyles);
  84. topButton.style.bottom = '50px';
  85. topButton.style.right = '14px';
  86.  
  87. // Add click event listener to scroll to the top
  88. topButton.addEventListener('click', function() {
  89. window.scrollTo({
  90. top: 0,
  91. behavior: 'smooth'
  92. });
  93. });
  94.  
  95. // Append buttons to the body
  96. document.body.appendChild(bottomButton);
  97. document.body.appendChild(topButton);
  98.  
  99. function throttle(func, delay) {
  100. let lastCall = 0;
  101. return function(...args) {
  102. const now = new Date().getTime();
  103. if (now - lastCall < delay) {
  104. return;
  105. }
  106. lastCall = now;
  107. return func.apply(this, args);
  108. };
  109. }
  110.  
  111. // Function to toggle the visibility of the top button
  112. function toggleTopButton() {
  113. if (window.scrollY === 0) {
  114. topButton.style.display = 'none';
  115. } else {
  116. topButton.style.display = 'flex';
  117. }
  118. }
  119.  
  120. // Initial check
  121. toggleTopButton();
  122.  
  123. window.addEventListener('scroll', throttle(toggleTopButton, 100));
  124. }
  125.  
  126. // 初始化
  127. init();
  128. })();