☰

Scroll to Top and Bottom Buttons

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

  1. // ==UserScript==
  2. // @name         Scroll to Top and Bottom Buttons
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Add buttons to scroll to the top and bottom of the page
  6. // @author       1010n111
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 创建按钮元素
  16.     const topButton = document.createElement('button');
  17.     topButton.innerHTML = '↑'; // 向上箭头
  18.     topButton.style.position = 'fixed';
  19.     topButton.style.left = '20px';
  20.     topButton.style.top = '50%';
  21.     topButton.style.transform = 'translateY(-100%)';
  22.     topButton.style.zIndex = '9999';
  23.     topButton.style.fontSize = '24px';
  24.     topButton.style.padding = '8px 12px';
  25.     topButton.style.border = 'none';
  26.     topButton.style.borderRadius = '8px';
  27.     topButton.style.backgroundColor = '#444';
  28.     topButton.style.color = 'white';
  29.     topButton.style.cursor = 'pointer';
  30.     topButton.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
  31.     topButton.addEventListener('mouseenter', () => {
  32.         topButton.style.backgroundColor = '#555';
  33.     });
  34.     topButton.addEventListener('mouseleave', () => {
  35.         topButton.style.backgroundColor = '#444';
  36.     });
  37.     topButton.addEventListener('click', () => {
  38.         window.scrollTo({
  39.             top: 0,
  40.             behavior: 'smooth'
  41.         });
  42.     });
  43.  
  44.     const bottomButton = document.createElement('button');
  45.     bottomButton.innerHTML = '↓'; // 向下箭头
  46.     bottomButton.style.position = 'fixed';
  47.     bottomButton.style.left = '20px';
  48.     bottomButton.style.top = 'calc(50% + 60px)';
  49.     bottomButton.style.zIndex = '9999';
  50.     bottomButton.style.fontSize = '24px';
  51.     bottomButton.style.padding = '8px 12px';
  52.     bottomButton.style.border = 'none';
  53.     bottomButton.style.borderRadius = '8px';
  54.     bottomButton.style.backgroundColor = '#444';
  55.     bottomButton.style.color = 'white';
  56.     bottomButton.style.cursor = 'pointer';
  57.     bottomButton.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)';
  58.     bottomButton.addEventListener('mouseenter', () => {
  59.         bottomButton.style.backgroundColor = '#555';
  60.     });
  61.     bottomButton.addEventListener('mouseleave', () => {
  62.         bottomButton.style.backgroundColor = '#444';
  63.     });
  64.     bottomButton.addEventListener('click', () => {
  65.         window.scrollTo({
  66.             top: document.body.scrollHeight,
  67.             behavior: 'smooth'
  68.         });
  69.     });
  70.  
  71.     // 将按钮添加到页面
  72.     document.body.appendChild(topButton);
  73.     document.body.appendChild(bottomButton);
  74. })();