☰

Scroll to Bottom and Top Button

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

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

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