Greasy Fork is available in English.
添加顶部、底部和位置记录功能的按钮
当前为
// ==UserScript==
// @name 多功能滚动按钮
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 添加顶部、底部和位置记录功能的按钮
// @author Your name
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
/* MIT License
Copyright (c) 2024 Your name
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
(function () {
"use strict";
// 创建按钮样式
const style = document.createElement("style");
style.textContent = `
.scroll-btn {
position: fixed;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 50%;
border: none;
cursor: pointer;
z-index: 9999;
transition: all 0.3s;
right: 20px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-btn:hover {
opacity: 0.8;
transform: scale(1.1);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.scroll-to-top {
bottom: 140px;
background-color: rgba(33, 33, 33, 0.9);
}
.scroll-to-bottom {
bottom: 80px;
background-color: rgba(33, 33, 33, 0.9);
}
.add-position {
bottom: 20px;
background-color: rgba(76, 175, 80, 0.9);
}
.recorded-position {
right: 70px;
background-color: rgba(33, 150, 243, 0.9);
}
.position-label {
position: fixed;
right: 120px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap;
}
// 修改高亮状态的样式
.scroll-btn.active {
transform: scale(1.15);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.scroll-to-top.active {
background-color: #FFC107; // 黄色
color: #000;
}
.scroll-to-bottom.active {
background-color: #FF5722; // 橙色
color: #000;
}
.recorded-position.active {
background-color: #4CAF50; // 绿色
color: #fff;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
}
.add-position:hover {
background-color: #81C784; // 浅绿色
}
.recorded-position:hover {
background-color: #42A5F5; // 浅蓝色
}
`;
document.head.appendChild(style);
let recordedPositions = [];
let nextPositionId = 1;
let activeButton = null; // 添加变量跟踪当前激活的按钮
// 创建返回顶部按钮
const topButton = createButton("↑", "scroll-to-top");
// 创建返回底部按钮
const bottomButton = createButton("↓", "scroll-to-bottom");
// 创建添加位置按钮
const addButton = createButton("+", "add-position");
// 返回顶部按钮点击事件
topButton.addEventListener("click", () => {
smoothScrollWithHighlight(0);
});
// 返回底部按钮点击事件
bottomButton.addEventListener("click", () => {
smoothScrollWithHighlight(document.documentElement.scrollHeight);
});
// 添加位置按钮点击事件
addButton.addEventListener("click", () => {
const currentPosition = window.scrollY;
const positionId = nextPositionId++;
const positionData = {
id: positionId,
position: currentPosition,
button: createPositionButton(positionId, currentPosition),
label: createPositionLabel(positionId, currentPosition),
};
recordedPositions.push(positionData);
showToast(`已记录位置 #${positionId}`);
updatePositionButtons();
});
// 创建基础按钮
function createButton(text, className) {
const button = document.createElement("button");
button.className = `scroll-btn ${className}`;
button.innerHTML = text;
document.body.appendChild(button);
return button;
}
// 创建位置记录按钮
function createPositionButton(id, position) {
const button = document.createElement("button");
button.className = `scroll-btn recorded-position`;
button.innerHTML = `${id}`;
button.style.bottom = `${20 + id * 60}px`;
// 添加悬停显示标签事件
button.addEventListener("mouseenter", () => {
const label = document.querySelector(`.position-label-${id}`);
if (label) {
label.style.opacity = "1";
}
});
button.addEventListener("mouseleave", () => {
const label = document.querySelector(`.position-label-${id}`);
if (label) {
label.style.opacity = "0";
}
});
button.addEventListener("click", () => {
smoothScrollWithHighlight(position);
});
document.body.appendChild(button);
return button;
}
// 创建位置标签
function createPositionLabel(id, position) {
const label = document.createElement("div");
label.className = `position-label position-label-${id}`;
label.textContent = `位置 #${id} (${Math.round(position)}px)`;
label.style.bottom = `${30 + id * 60}px`;
document.body.appendChild(label);
return label;
}
// 显示提示信息
function showToast(message) {
const toast = document.createElement("div");
toast.style.cssText = `
position: fixed;
bottom: 70px;
right: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 4px;
z-index: 10000;
`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
document.body.removeChild(toast);
}, 2000);
}
// 更新位置按钮显示
function updatePositionButtons() {
recordedPositions.forEach((data, index) => {
data.button.style.display = "flex";
data.label.style.display = "block";
});
}
// 修改滚动监听器，移除按钮显示/隐藏逻辑
let scrollTimeout;
window.addEventListener("scroll", () => {
// 移除按钮显示/隐藏的控制，让按钮始终显示
// 使用防抖处理高亮状态更新
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
updateButtonStates();
}, 100);
});
// 修改按钮状态更新函数
function updateButtonStates() {
// 移除所有按钮的高亮状态
const allButtons = document.querySelectorAll(".scroll-btn");
allButtons.forEach((btn) => btn.classList.remove("active"));
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
// 检查是否在顶部，增加容差范围
if (scrollPosition <= 200) {
topButton.classList.add("active");
return;
}
// 检查是否在底部，增加容差范围
if (scrollPosition + windowHeight >= documentHeight - 200) {
bottomButton.classList.add("active");
return;
}
// 检查是否在记录的位置附近，增加容差范围
recordedPositions.forEach((data) => {
if (Math.abs(scrollPosition - data.position) < 200) {
data.button.classList.add("active");
}
});
}
// 修改滚动事件处理
function smoothScrollWithHighlight(targetPosition) {
window.scrollTo({
top: targetPosition,
behavior: "smooth",
});
}
// 初始化时更新按钮状态
updateButtonStates();
})();