☰

Top/Bottom of page and PageUp/PageDown buttons

Add buttons to scroll to top/bottom of page, PageUp and PageDown. Useful when reading web pages on e-ink screens.

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

  1. // ==UserScript==
  2. // @name         Top/Bottom of page and PageUp/PageDown buttons
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.2
  5. // @description  Add buttons to scroll to top/bottom of page, PageUp and PageDown. Useful when reading web pages on e-ink screens.
  6. // @author       xiaq
  7. // @match        *://*/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
  9. // @grant        none
  10. // @license      BSD 2-clause
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const upDownScrollFactor = 0.8; // How much of the page PageUp/PageDown scrolls by
  17.     const opacity = 0.5; // Opacity of all buttons. 0 = transparent, 1 = opaque
  18.     const right = true; // true = right side, false = left side
  19.     const sideGapPx = 8; // Gap between each button with the left/right side of the page
  20.     const upDownGapPx = 12; // Gap between PageUp and PageDown buttons
  21.     const topBottomGapPx = 48; // Gap between a Top/Bottom button with the top/bottom of the page
  22.     const boxSizePx = 48;
  23.     const fontSizePx = 32;
  24.  
  25.     const commonStyle = `
  26.         opacity: ${opacity};
  27.         width: ${boxSizePx}px;
  28.         height: ${boxSizePx}px;
  29.         font-size: ${fontSizePx}px;
  30.         border: 1px solid black;
  31.         display: flex;
  32.         align-items: center;
  33.         justify-content: center;
  34.         position: fixed;
  35.         ${right? 'right' : 'left'}: ${sideGapPx}px;
  36.     `;
  37.  
  38.     // Top
  39.     addButton('⤒', () => { window.scrollTo(0, 0); },
  40.              `top: ${topBottomGapPx}px;`);
  41.     // Bottom
  42.     addButton('⤓', () => { window.scrollTo(0, document.body.scrollHeight); },
  43.              `bottom: ${topBottomGapPx}px;`)
  44.     // PageUp
  45.     addButton('▲', () => { scrollByFactor(-upDownScrollFactor) },
  46.               `bottom: calc(50% + ${upDownGapPx / 2}px);`);
  47.     // PageDown
  48.     addButton('▼', () => { scrollByFactor(upDownScrollFactor) },
  49.               `top: calc(50% + ${upDownGapPx / 2}px`);
  50.  
  51.     function addButton(text, onclick, style) {
  52.         const button = document.createElement('button');
  53.         button.innerText = text;
  54.         button.onclick = onclick;
  55.         button.style = commonStyle + style;
  56.         document.body.appendChild(button);
  57.     }
  58.  
  59.     function scrollByFactor(factor) {
  60.         window.scrollBy(0, factor * document.documentElement.clientHeight);
  61.     }
  62. })();