为网页增加向页尾、页首的按钮及快捷键。
当前为
// ==UserScript==
// @name Jump to Top/Bottom
// @author 11ze
// @description 为网页增加向页尾、页首的按钮及快捷键。
// @version 0.0.1
// @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/*
// @exclude https://www.notion.so/*
// @exclude https://time.geekbang.com/column/article/*
// @exclude https://chat.openai.com/*
// @grant none
// @license MIT
// @namespace https://greasyfork.org/users/1076530
// ==/UserScript==
/* ************************ 页面效果 ************************ */
//var buttonColor = '0, 0, 0, 0.7'; // 灰色
//var buttonColor = '241,148,138,0.500'; // 橙色
var buttonColor = '247,220,111,0.667'; // 黄色
//var buttonColor = '72,201,176,1.000'; // 绿色
//var topImage = 'iVBORw0KGgoAAAANSUhEUgAAABIAAAAUBAMAAAByuXB5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAbUExURf///6qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpshoL4AAAAIdFJOUwARM2aImczuGAB4owAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAEZJREFUGNNj6IABBgQLB2BME4CyxDoSIQymio52BTBLHaixCMRgrgCy2g2ALAuwac0MDCxQgx0YIqCsVhTbOIBUA9gUslkA7dcxR/3Xli8AAAAASUVORK5CYII=';
//var downImage = 'iVBORw0KGgoAAAANSUhEUgAAABIAAAAUBAMAAAByuXB5AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAbUExURf///6qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqpshoL4AAAAIdFJOUwARM2aImczuGAB4owAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAE1JREFUGNNjYGDg6OjoaGAAAfJZHTDAEAFltDKwQFkODAwWYEYzUCFzBZDRbgDSqw5kFYFNYaroaFcAsxjEOhIhDAbGNAEGHABhG5wFAH6qMUfw6SaOAAAAAElFTkSuQmCC';
var topImage = 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAAe0lEQVRYhe2QOwqAMBAFB0/jXazEwutYehsrz+aviE3SCH4SdQV5A9sEsjMsCCGEuEcDtF/KnR/ziCCf/Tj/Zi4vgQIYMbrEVh4widiTm0ScyV+NuCp/JSJW/mhEqjwqIjtYMAALUANdQkAPVMDkdyWRp358eIcQQvyYFerfNk+Wc2XSAAAAAElFTkSuQmCC'
var 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'
// top 按钮
function create_top_button() {
var a = document.createElement('span');
var c = `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`;
a.style.cssText = c;
a.addEventListener('mouseover', function(){ a.style.opacity = 0.8;}, false);
a.addEventListener('mouseout', function(){ a.style.opacity = 0.2; }, false);
a.addEventListener('click', function(){
window.scrollTo(0,0);
}, false );
document.body.appendChild(a);
};
if(self == top) create_top_button();
// bottom 按钮
function create_bottom_button() {
var b = document.createElement('span');
var c = `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`;
b.style.cssText = c;
b.addEventListener('mouseover', function(){ b.style.opacity = 0.8; }, false);
b.addEventListener('mouseout', function(){ b.style.opacity = 0.2; }, false);
b.addEventListener('click', function(){
window.scrollTo(0,document.body.scrollHeight);
}, false);
document.body.appendChild(b);
};
if(self==top) create_bottom_button();
// 翻页快捷键
(function () {
var scroll = {
'j' : function() { scrollBy(0, 40) },
'J' : function() { scrollBy(0, 40) }, // 往下翻一点点
'n' : function() { scrollBy(0, 150) },
'N' : function() { scrollBy(0, 150) }, // 往下翻多一点
'd' : function() { scrollBy(0, window.innerHeight / 2) },
'D' : function() { scrollBy(0, window.innerHeight / 2) }, // 往下翻（最多）
'k' : function() { scrollBy(0,-40) },
'K' : function() { scrollBy(0,-40) }, // 往上翻一点点
'm' : function() { scrollBy(0,-150) },
'M' : function() { scrollBy(0,-150) }, // 往上翻多一点
'a' : function() { scrollBy(0,-window.innerHeight / 2) },
'A' : function() { scrollBy(0,-window.innerHeight / 2) }, // 往上翻（最多）
'w' : function() { scrollTo(0,0) },
'W' : function() { scrollTo(0,0) }, // 回页首
's' : function() { scrollTo(0,document.body.scrollHeight) },
'S' : function() { scrollTo(0,document.body.scrollHeight) },// 回页尾
};
var formElement = { 'input':true, 'button':true, 'select':true, 'textarea':true };
window.addEventListener('keypress',
function(e) {
if (e.metaKey || e.ctrlKey || e.altKey ||
formElement[e.target.tagName.toLowerCase()] || e.target.isContentEditable || document.designMode ==="on") {
return; }
var key = (e.shiftKey? 'S-' : '') + String.fromCharCode(e.charCode);
if (scroll[key]) {
scroll[key]();
e.preventDefault();
e.stopPropagation();
}
}, false);
})();