☰

Jump to Top/Bottom

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

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

// ==UserScript==
// @name		        Jump to Top/Bottom
// @author		        11ze
// @description	        为网页增加向页尾、页首的按钮
// @version				0.0.3
// @icon			data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAALVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////BHg4sAAAADXRSTlMAK1RVW1x3f4CI+vv8UJ/ShgAAAAFiS0dEDm+9ME8AAABqSURBVCjPY2CgHuCYgCbQexNNwe29DagKjmijKOG448C0dwKKAgYGZCVABQwMyErYjoBIrQKEEgEQwchAb4BuLQfYYdpILoU4HcmluSDPXUcyg+1OADOyAqCSo9bX8QchQ+519GhooKK3APJHHdKCOOK5AAAAAElFTkSuQmCC
// @match     	    *
// @include   	    *
// @exclude     	https://mail.google.com/*
// @exclude     	http://dzh.mop.com/*
// @exclude     	http://www.douban.com/photos/*
// @grant			none
// @license MIT
// @namespace https://greasyfork.org/users/1076530
// ==/UserScript==

/* ************************ 页面效果 ************************ */

//const buttonColor = '241,148,138,0.500'; // 红色
const buttonColor = '247,220,111,0.667'; // 奶黄

const topImage =
  'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAe0lEQVRYhe2QOwqAMBAFB0/jXazEwutYehsrz+aviE3SCH4SdQV5A9sEsjMsCCGEuEcDtF/KnR/ziCCf/Tj/Zi4vgQIYMbrEVh4widiTm0ScyV+NuCp/JSJW/mhEqjwqIjtYMAALUANdQkAPVMDkdyWRp358eIcQQvyYFerfNk+Wc2XSAAAAAElFTkSuQmCC';
const downImage =
  'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAlUlEQVRYhe3QMRLBUBRA0YMxtmIvqajsRCk6W1FYhMKamIyZKCQzmoT8SBTerf979/5HEARB0M7ylztyFFj1kGe44dD0YNoyfMUcx8SIDCcsql1JbFHijk2HubXn9UrsUuWpEV+Vd40YRP5pxKDydxGjyJsiRpXX5JWweJHnY8lr6kv0+vmsR8AFE5yx77EnCILgz3kAzr4zPi4gwh0AAAAASUVORK5CYII=';

//var topImage = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAhElEQVRYhe2VOQ6AIBAAR1/jX6yMhd+x9DdWvs2rwAYa4wWBNdGdZBsSdiY0gKIofyc7ODOSzjyxTFGS0wLdm3JjRzzCyRc7xp6JyyugBCaEXmIvd4hEnMlFIu7kSSOeypNE+MqjRoTKvSKuvuMRWIEG6AMCBqAGZrsriCL0YuQdivJhNpbeN1J6QXXsAAAAAElFTkSuQmCC'
//var downImage = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAoklEQVRYhe3VsQ3CMBRF0RMQYhV2SQUVm1ASOlahYAgKZgJFSKEgkShIIA4xBb6l5f/u829MIpHoZvHLjAIllgPkOa7Yt12YdAxfMMMhsESOI+Z1VhAbVLhh3WNu5bG9CttQeWiJr8r7lhhF/mmJUeXvSkSRt5WIKm8oamH5JC9iyRuaTQx6+XRAgTMynLAbkJP4c7IXZ1VMZ9d3nEgkElG4Ax/RNEFqVqeUAAAAAElFTkSuQmCC'

function create_top_button() {
  const button = document.createElement('span');
  button.style.cssText = `opacity:0.3;
             -moz-transition-duration:0.2s;
             -webkit-transition-duration:0.2s;
             background:url("data:image/png;base64,${topImage}")
             no-repeat scroll 50% 50% rgba(${buttonColor});
             border-radius:5px 5px 5px 5px;cursor:pointer;
             position:fixed;
             bottom:50%;
             width:40px;
             height:40px;
             right:0px;
             z-index:9999`;
  button.addEventListener(
    'mouseover',
    function () {
      button.style.opacity = 0.8;
    },
    false
  );
  button.addEventListener(
    'mouseout',
    function () {
      button.style.opacity = 0.2;
    },
    false
  );
  button.addEventListener(
    'click',
    function () {
      window.scrollTo(0, 0);

      // 极客时间文章页面 https://time.geekbang.org/column/article/
      const geek = document.getElementById('article-content-container');
      if (geek) {
        geek.scrollIntoView();
      }

      // QQ 邮箱邮件详情 https://mail.qq.com/cgi-bin/frame_html
      const iframe = document.getElementById('mainFrame');
      if (iframe) {
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        const mailText = iframeDocument.getElementById('qqmail_mailcontainer');
        if (mailText) {
          mailText.scrollIntoView();
        }
      }

      // Notion 页面
      const notion = document.querySelector('.whenContentEditable');
      if (notion) {
        notion.scrollIntoView();
      }

      // https://chat.openai.com/
      const chatGPT = document.querySelector(
        '#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div > div > main > div.flex-1.overflow-hidden > div > div > div'
      );
      if (chatGPT) {
        chatGPT.scrollIntoView();
      }
    },
    false
  );
  document.body.appendChild(button);
}
if (self == top) create_top_button();

function create_bottom_button() {
  var button = document.createElement('span');
  button.style.cssText = `opacity:0.3;
             -moz-transition-duration:0.2s;
             -webkit-transition-duration:0.2s;
             background:url("data:image/png;base64,${downImage}")
             no-repeat scroll 50% 50% rgba(${buttonColor});
             border-radius:5px 5px 5px 5px;
             cursor:pointer;
             position:fixed;
             top:51%;
             width:40px;
             height:40px;
             right:0px;
             z-index:9999`;
  button.addEventListener(
    'mouseover',
    function () {
      button.style.opacity = 0.8;
    },
    false
  );
  button.addEventListener(
    'mouseout',
    function () {
      button.style.opacity = 0.2;
    },
    false
  );
  button.addEventListener(
    'click',
    function () {
      window.scrollTo(0, document.body.scrollHeight);

      // 极客时间文章页面 https://time.geekbang.org/column/article/
      const geek = document.getElementById('article-content-container');
      if (geek) {
        geek.scrollIntoView({ block: 'end' });
      }

      // QQ 邮箱邮件详情 https://mail.qq.com/cgi-bin/frame_html
      const iframe = document.getElementById('mainFrame');
      if (iframe) {
        const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
        const mailText = iframeDocument.getElementById('qqmail_mailcontainer');
        if (mailText) {
          mailText.scrollIntoView({ block: 'end' });
        }
      }

      // https://www.notion.so
      const notion = document.querySelector('.whenContentEditable');
      if (notion) {
        notion.scrollIntoView({ block: 'end' });
      }

      // https://chat.openai.com/
      const chatGPT = document.querySelector(
        '#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div > div > main > div.flex-1.overflow-hidden > div > div > div'
      );
      if (chatGPT) {
        chatGPT.scrollIntoView({ block: 'end' });
      }
    },
    false
  );
  document.body.appendChild(button);
}
if (self == top) create_bottom_button();