☰

Scroll to Bottom Button

Add a button to scroll to the bottom of the website

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

  1. // ==UserScript==
  2. // @name         Scroll to Bottom Button
  3. // @name:zh      底部按钮
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.4
  6. // @description  Add a button to scroll to the bottom 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
  19.     const base64Icon = 'PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24tc20gbS0xIiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bGluZSB4MT0iMTIiIHkxPSI1IiB4Mj0iMTIiIHkyPSIxOSI+PC9saW5lPjxwb2x5bGluZSBwb2ludHM9IjE5IDEyIDEyIDE5IDUgMTIiPjwvcG9seWxpbmU+PC9zdmc+';
  20.  
  21.     // Create the button
  22.     const button = document.createElement('button');
  23.     const img = document.createElement('img');
  24.     img.src = `data:image/svg+xml;base64,${base64Icon}`;
  25.     img.alt = 'Scroll to Bottom';
  26.     img.style.width = '16px';  // 宽度调整为 16px
  27.     img.style.height = '16px'; // 高度调整为 16px
  28.     img.style.display = 'block'; // 确保图标垂直居中
  29.     button.appendChild(img);
  30.  
  31.     // Apply styles to the button
  32.     button.style.position = 'fixed';
  33.     button.style.bottom = '14px';
  34.     button.style.right = '14px';
  35.     button.style.zIndex = '2';
  36.     button.style.backgroundColor = 'none'; // 修正为透明背景
  37.     button.style.border = '0.5px solid transparent';                // 修正为无边框
  38.     button.style.borderRadius = '50%';
  39.     button.style.padding = '4px';
  40.     button.style.cursor = 'pointer';
  41.     button.style.display = 'flex';              // 使用 flex 布局
  42.     button.style.alignItems = 'center';         // 垂直居中
  43.     button.style.justifyContent = 'center';     // 水平居中
  44.  
  45.     // Add click event listener to scroll to the bottom
  46.     button.addEventListener('click', function() {
  47.         window.scrollTo({
  48.             top: document.body.scrollHeight,
  49.             behavior: 'smooth'
  50.         });
  51.     });
  52.  
  53.     // Append the button to the body
  54.     document.body.appendChild(button);
  55. })();