Scroll to Bottom and Top Button

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

当前为 2025-03-17 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Scroll to Bottom and Top Button
  3. // @name:zh 底部和顶部按钮
  4. // @namespace https://greasyfork.org/
  5. // @version 0.91
  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. if (window !== window.top) {
  18. return;
  19. }
  20.  
  21. // Base64-encoded SVG data for bottom icon
  22. const base64BottomIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+';
  23.  
  24. // Base64-encoded SVG data for top icon
  25. const base64TopIcon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSIxOSIgeDI9IjEyIiB5Mj0iNSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjUgMTIgMTIgNSAxOSAxMiI+PC9wb2x5bGluZT48L3N2Zz4=';
  26.  
  27. // Create the bottom button
  28. const bottomButton = document.createElement('button');
  29. const bottomImg = document.createElement('img');
  30. bottomImg.src = `data:image/svg+xml;base64,${base64BottomIcon}`;
  31. bottomImg.alt = 'Scroll to Bottom';
  32. bottomImg.style.width = '16px';
  33. bottomImg.style.height = '16px';
  34. bottomImg.style.display = 'block';
  35. bottomButton.appendChild(bottomImg);
  36.  
  37. // Apply styles to the bottom button
  38. bottomButton.style.position = 'fixed';
  39. bottomButton.style.bottom = '14px';
  40. bottomButton.style.right = '14px';
  41. bottomButton.style.zIndex = '1';
  42. bottomButton.style.backgroundColor = 'none';
  43. bottomButton.style.border = '0.5px solid transparent';
  44. bottomButton.style.borderRadius = '50%';
  45. bottomButton.style.padding = '4px';
  46. bottomButton.style.cursor = 'pointer';
  47. bottomButton.style.display = 'flex';
  48. bottomButton.style.alignItems = 'center';
  49. bottomButton.style.justifyContent = 'center';
  50.  
  51. // Add click event listener to scroll to the bottom
  52. bottomButton.addEventListener('click', function() {
  53. window.scrollTo({
  54. top: document.body.scrollHeight,
  55. behavior: 'smooth'
  56. });
  57. });
  58.  
  59. // Append the bottom button to the body
  60. document.body.appendChild(bottomButton);
  61.  
  62. // Create the top button
  63. const topButton = document.createElement('button');
  64. const topImg = document.createElement('img');
  65. topImg.src = `data:image/svg+xml;base64,${base64TopIcon}`;
  66. topImg.alt = 'Scroll to Top';
  67. topImg.style.width = '16px';
  68. topImg.style.height = '16px';
  69. topImg.style.display = 'block';
  70. topButton.appendChild(topImg);
  71.  
  72. // Apply styles to the top button
  73. topButton.style.position = 'fixed';
  74. topButton.style.bottom = '50px';
  75. topButton.style.right = '14px';
  76. topButton.style.zIndex = '1';
  77. topButton.style.backgroundColor = 'none';
  78. topButton.style.border = '0.5px solid transparent';
  79. topButton.style.borderRadius = '50%';
  80. topButton.style.padding = '4px';
  81. topButton.style.cursor = 'pointer';
  82. topButton.style.display = 'flex';
  83. topButton.style.alignItems = 'center';
  84. topButton.style.justifyContent = 'center';
  85.  
  86. // Add click event listener to scroll to the top
  87. topButton.addEventListener('click', function() {
  88. window.scrollTo({
  89. top: 0,
  90. behavior: 'smooth'
  91. });
  92. });
  93.  
  94. // Append the top button to the body
  95. document.body.appendChild(topButton);
  96.  
  97. // Function to toggle the visibility of the top button
  98. function toggleTopButton() {
  99. if (window.scrollY === 0) {
  100. topButton.style.display = 'none';
  101. } else {
  102. topButton.style.display = 'flex';
  103. }
  104. }
  105.  
  106. // Initial check
  107. toggleTopButton();
  108.  
  109. // Add scroll event listener to toggle the top button
  110. window.addEventListener('scroll', toggleTopButton);
  111. })();