☰

Scroll To Top/Bottom Button

Add buttons to scroll to top and bottom of page in the bottom right corner of the screen

目前为 2023-03-14 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Scroll To Top/Bottom Button
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Add buttons to scroll to top and bottom of page in the bottom right corner of the screen
  6. // @match        *://*/*
  7. // @grant        GM_addStyle
  8. // @license      MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Check if running in top-level document and not in an iframe
  15.     if (window.self === window.top && !window.frameElement) {
  16.         // Define the styles for the buttons
  17.         var styles = `
  18.             .scroll-to-btn {
  19.                 position: fixed;
  20.                 right: 20px;
  21.                 font-size: 50px;
  22.                 border: none;
  23.                 color: white;
  24.                 border-radius: 10%;
  25.                 cursor: pointer;
  26.                 z-index: 9999; /* set z-index to a high value */
  27.                 background-color: transparent;
  28.                 filter: grayscale(90%);
  29.                 /* transform: rotateX(30deg)  translateZ(50px) ;*/
  30.             }
  31.             .scroll-to-btn.top {
  32.                 bottom: 95px;
  33.             }
  34.             .scroll-to-btn.bottom {
  35.                 bottom: 40px;
  36.             }
  37.         `;
  38.  
  39.         // Add the styles to the page
  40.         GM_addStyle(styles);
  41.  
  42.         // Create the scroll to top button
  43.         var scrollToTopBtn = document.createElement("button");
  44.         scrollToTopBtn.innerText = "🔼";
  45.         scrollToTopBtn.classList.add("scroll-to-btn", "top");
  46.         scrollToTopBtn.addEventListener("click", function() {
  47.             window.scrollTo({top: 0, behavior: 'smooth',timingFunction: 'cubic-bezier(0,.84,.49,.99)'});
  48.         });
  49.  
  50.         // Create the scroll to bottom button
  51.         var scrollToBottomBtn = document.createElement("button");
  52.         scrollToBottomBtn.innerText = "🔽";
  53.         scrollToBottomBtn.classList.add("scroll-to-btn", "bottom");
  54.         scrollToBottomBtn.addEventListener("click", function() {
  55.             window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth',timingFunction: 'cubic-bezier(0,.84,.49,.99)'});
  56.         });
  57.  
  58.         // Add the buttons to the page
  59.         document.body.appendChild(scrollToTopBtn);
  60.         document.body.appendChild(scrollToBottomBtn);
  61.     }
  62. })();