☰

Jump to Top/Bottom

为网页增加向页尾、页首的按钮

目前为 2023-05-12 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name		        Jump to Top/Bottom
  3. // @author		        11ze
  4. // @description	        为网页增加向页尾、页首的按钮
  5. // @version				0.0.8
  6. // @icon			data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////BHg4sAAAADXRSTlMAK1RVW1x3f4CI+vv8UJ/ShgAAAAFiS0dEDm+9ME8AAABqSURBVCjPY2CgHuCYgCbQexNNwe29DagKjmijKOG448C0dwKKAgYGZCVABQwMyErYjoBIrQKEEgEQwchAb4BuLQfYYdpILoU4HcmluSDPXUcyg+1OADOyAqCSo9bX8QchQ+519GhooKK3APJHHdKCOOK5AAAAAElFTkSuQmCC
  7. // @match     	    *
  8. // @include   	    *
  9. // @grant			none
  10. // @license MIT
  11. // @namespace https://greasyfork.org/users/1076530
  12. // ==/UserScript==
  13.  
  14. /* ************************ 页面效果 ************************ */
  15.  
  16. //const buttonColor = '241,148,138,0.500'; // 红色
  17. const buttonColor = '247,220,111,0.667'; // 奶黄
  18.  
  19. const topImage =
  20.   'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAe0lEQVRYhe2QOwqAMBAFB0/jXazEwutYehsrz+aviE3SCH4SdQV5A9sEsjMsCCGEuEcDtF/KnR/ziCCf/Tj/Zi4vgQIYMbrEVh4widiTm0ScyV+NuCp/JSJW/mhEqjwqIjtYMAALUANdQkAPVMDkdyWRp358eIcQQvyYFerfNk+Wc2XSAAAAAElFTkSuQmCC';
  21. const downImage =
  22.   'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAlUlEQVRYhe3QMRLBUBRA0YMxtmIvqajsRCk6W1FYhMKamIyZKCQzmoT8SBTerf979/5HEARB0M7ylztyFFj1kGe44dD0YNoyfMUcx8SIDCcsql1JbFHijk2HubXn9UrsUuWpEV+Vd40YRP5pxKDydxGjyJsiRpXX5JWweJHnY8lr6kv0+vmsR8AFE5yx77EnCILgz3kAzr4zPi4gwh0AAAAASUVORK5CYII=';
  23.  
  24. function createTopButton() {
  25.   const cssText = `opacity:0.3;
  26.                   -moz-transition-duration:0.2s;
  27.                   -webkit-transition-duration:0.2s;
  28.                   background:url("data:image/png;base64,${topImage}")
  29.                   no-repeat scroll 50% 50% rgba(${buttonColor});
  30.                   border-radius:5px 5px 5px 5px;cursor:pointer;
  31.                   position:fixed;
  32.                   bottom:50%;
  33.                   width:40px;
  34.                   height:40px;
  35.                   right:0px;
  36.                   z-index:9999`;
  37.   createButton(cssText, function () {
  38.     if (window.scrollHeight) {
  39.       window.scrollTo(0, 0);
  40.       return;
  41.     }
  42.  
  43.     const target = getTarget();
  44.     if (target) {
  45.       target.scrollIntoView();
  46.       return;
  47.     }
  48.  
  49.     runScrollableElements(true);
  50.   });
  51. }
  52. if (self == top) createTopButton();
  53.  
  54. function createBottomButton() {
  55.   const cssText = `opacity:0.3;
  56.                   -moz-transition-duration:0.2s;
  57.                   -webkit-transition-duration:0.2s;
  58.                   background:url("data:image/png;base64,${downImage}")
  59.                   no-repeat scroll 50% 50% rgba(${buttonColor});
  60.                   border-radius:5px 5px 5px 5px;
  61.                   cursor:pointer;
  62.                   position:fixed;
  63.                   top:51%;
  64.                   width:40px;
  65.                   height:40px;
  66.                   right:0px;
  67.                   z-index:9999`;
  68.   createButton(cssText, function () {
  69.     if (window.scrollHeight) {
  70.       window.scrollTo(0, document.body.scrollHeight);
  71.       return;
  72.     }
  73.  
  74.     const target = getTarget();
  75.     if (target) {
  76.       target.scrollIntoView({ block: 'end' });
  77.       return;
  78.     }
  79.  
  80.     runScrollableElements(false);
  81.   });
  82. }
  83. if (self == top) createBottomButton();
  84.  
  85. function createButton(cssText, clickFn) {
  86.   const button = document.createElement('span');
  87.   button.style.cssText = cssText;
  88.   button.addEventListener(
  89.     'mouseover',
  90.     function () {
  91.       button.style.opacity = 0.8;
  92.     },
  93.     false
  94.   );
  95.   button.addEventListener(
  96.     'mouseout',
  97.     function () {
  98.       button.style.opacity = 0.2;
  99.     },
  100.     false
  101.   );
  102.   button.addEventListener('click', clickFn, false);
  103.   document.body.appendChild(button);
  104. }
  105.  
  106. function getTarget() {
  107.   // QQ 邮箱邮件详情 https://mail.qq.com/cgi-bin/frame_html
  108.   const iframe = document.getElementById('mainFrame');
  109.   if (iframe) {
  110.     const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  111.     const mailText = iframeDocument.getElementById('qqmail_mailcontainer');
  112.     if (mailText) {
  113.       return mailText;
  114.     }
  115.   }
  116. }
  117.  
  118. function runScrollableElements(isTop) {
  119.   const elements = document.querySelectorAll('*');
  120.   for (const e of elements) {
  121.     if (
  122.       e.scrollHeight > e.clientHeight &&
  123.       e.scrollHeight > 300 &&
  124.       e.scrollWidth > 300 &&
  125.       !e.innerHTML.includes('<html')
  126.     ) {
  127.       if (isTop) {
  128.         e.scrollTo(0, 0);
  129.       } else {
  130.         e.scrollTo(0, e.scrollHeight);
  131.       }
  132.     }
  133.   }
  134. }