自动生成一套【前往底部】和【回到顶部】按钮，补充网站功能
当前为
// ==UserScript==
// @name 回到顶部、前往底部
// @namespace http://tampermonkey.net/
// @version 2.1
// @description 自动生成一套【前往底部】和【回到顶部】按钮，补充网站功能
// @author CoderBen
// @match *://*/*
// @icon https://cdn3.iconfinder.com/data/icons/leto-space/64/__rocket_spaceship-64.png
// @grant none
// ==/UserScript==
(function() {
'use strict';
let menu
let rightClickedBtnId = ''
if (window.frames.length === parent.frames.length) {
createStyle()
createButtonToTop()
createButtonToBottom()
createMenu()
if (menu) {
window.addEventListener('click', function() {
menu?.classList.remove('coderben__active')
})
}
}
function createStyle() {
const style = document.createElement('style')
style.innerHTML = `
.coderben__menu{
position: absolute;
bottom: 50px;
left: 50px;
font-size: 14px;
font-weight: normal;
background: #eee;
border: 1px solid #dadce0;
visibility: hidden;
}
.coderben__menu__item {
min-width: 100px;
cursor: pointer;
}
.coderben__menu__item:hover {
background-color: #ccc;
}
.coderben__active{
visibility: visible;
}
`
document.head.appendChild(style)
}
function getTargetButton() {
return document.getElementById(rightClickedBtnId)
}
function handleHide() {
const target = getTargetButton()
if (!target) return
target.style.display = 'none'
}
function checkPosition(x, y) {
if (x > window.innerWidth - 50) {
alert('超出屏幕宽度，请重新操作')
return false
}
if (y > window.innerHeight - 50) {
alert('超出屏幕高度，请重新操作')
return false
}
return true
}
function initMenuPosition(x, y) {
if (!menu) return
const menuSize = 102
if (x <= menuSize) {
menu.style.left = '50px'
menu.style.right = 'auto'
}
if (x >= window.innerWidth - menuSize - 50) {
menu.style.right = '50px'
menu.style.left = 'auto'
}
if (y <= menuSize) {
menu.style.top = '50px'
menu.style.bottom = 'auto'
}
if (y >= window.innerHeight - menuSize - 50) {
menu.style.bottom = '50px'
menu.style.top = 'auto'
}
}
function handleChangePosition() {
const target = getTargetButton()
if (!target) return
const {right, bottom, width, height, left, top} = target.style
const l = parseInt(left) || (window.innerWidth - parseInt(right) - parseInt(width))
const t = parseInt(top) || (window.innerHeight - parseInt(bottom) - parseInt(height))
const position = window.prompt('请输入要设置的坐标，基于屏幕左上角，以逗号分隔，比如"1000,150"', `${l},${t}`)
if (!position) return
let [x, y] = position.split(',')
x = parseInt(x)
y = parseInt(y)
if (Object.is(x, NaN) || Object.is(y, NaN)) {
alert('坐标格式不正确')
return
}
if (!checkPosition(x, y)) return
target.style.left = x + 'px'
target.style.top = y + 'px'
initMenuPosition(x, y)
localStorage.setItem('coderben__position_' + rightClickedBtnId, x + ',' + y)
}
function createMenu() {
menu = document.createElement('div')
menu.id = 'coderben__menu'
menu.classList.add('coderben__menu')
const menuItem1 = document.createElement('div')
menuItem1.innerText = '隐藏按钮'
menuItem1.classList.add('coderben__menu__item')
menuItem1.onclick = (e) => {
e.stopPropagation()
handleHide()
}
menu.appendChild(menuItem1)
const menuItem2 = document.createElement('div')
menuItem2.innerText = '设置按钮位置'
menuItem2.classList.add('coderben__menu__item')
menuItem2.onclick = (e) => {
e.stopPropagation()
menu.classList.remove('coderben__active')
handleChangePosition()
}
menu.appendChild(menuItem2)
}
function hanleRightClick(e, btn) {
e.preventDefault()
rightClickedBtnId = btn.id
if (!menu) return
menu.classList.add('coderben__active')
menu.remove()
btn.appendChild(menu)
initMenuPosition(btn.offsetLeft, btn.offsetTop)
}
function loadInitialPosition(btn) {
const p = localStorage.getItem('coderben__position_' + btn.id)
if (p) {
const [x, y] = p.split(',')
btn.style.left = x + 'px'
btn.style.top = y + 'px'
}
}
function createButtonToTop() {
const btn = document.createElement('div')
btn.id = 'coderben__btn-to-top'
btn.innerHTML = `
<img
width="50px"
height="50px"
alt="↑"
title="回到顶部(右键打开菜单)"
src="data:image/png;base64,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"
/>
`
btn.style.fontSize = '28px'
btn.style.fontWeight = 900
btn.style.textAlign = 'center'
btn.style.lineHeight = '50px'
btn.style.cursor = 'pointer'
btn.style.width = '50px'
btn.style.height = '50px'
btn.style.background = 'transparent'
btn.style.position = 'fixed'
btn.style.right = '400px'
btn.style.bottom = '50px'
btn.style.transform = 'rotate(-45deg)'
loadInitialPosition(btn)
btn.style.zIndex = 1001
btn.onclick = () => scrollTo(0, 0)
btn.oncontextmenu = (e) => hanleRightClick(e, btn)
document.body.appendChild(btn)
}
function createButtonToBottom() {
const btn = document.createElement('div')
btn.id = 'coderben__btn-to-bottom'
btn.innerHTML = `
<img
width="50px"
height="50px"
alt="↓"
title="前往底部(右键打开菜单)"
src="data:image/png;base64,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"
/>
`
btn.style.fontSize = '28px'
btn.style.fontWeight = 900
btn.style.textAlign = 'center'
btn.style.lineHeight = '50px'
btn.style.cursor = 'pointer'
btn.style.width = '50px'
btn.style.height = '50px'
btn.style.background = 'transparent'
btn.style.position = 'fixed'
btn.style.right = '466px'
btn.style.bottom = '50px'
btn.style.transform = 'rotate(-45deg)'
loadInitialPosition(btn)
btn.style.zIndex = 1001
btn.onclick = () => scrollTo(0, 9999999999)
btn.oncontextmenu = (e) => hanleRightClick(e, btn)
document.body.appendChild(btn)
}
})();