在浏览器中添加悬浮翻页按钮，实现瞬时滚动
// ==UserScript==
// @name Instant Scroll
// @namespace http://tampermonkey.net/
// @version 2.1
// @description 在浏览器中添加悬浮翻页按钮，实现瞬时滚动
// @author chen
// @match https://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 避免在非顶层窗口（如 iframe）中加载
if (window.top !== window.self) return;
// 创建悬浮容器
const container = document.createElement('div');
container.style.position = 'fixed';
// 最小 60px，首选屏幕高度的 8%，最大不超过 100px
container.style.bottom = 'clamp(60px, 8vh, 100px)';
// 最小 10px，首选屏幕宽度的 3%，最大不超过 40px
container.style.left = 'clamp(10px, 3vw, 40px)';
container.style.zIndex = '999999';
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.gap = 'clamp(10px, 2vmin, 20px)';
// 统一样式函数
function createButton(text) {
const btn = document.createElement('button');
btn.innerText = text;
// 按钮大小：最小 35px，理想情况屏幕较短边的 8%，最大 60px
const size = 'clamp(35px, 8vmin, 60px)';
btn.style.width = size;
btn.style.height = size;
btn.style.borderRadius = '50%';
// btn.style.backgroundColor = '#fff';
btn.style.backgroundColor = 'transparent';
btn.style.color = '#000';
btn.style.border = 'solid #333333';
btn.style.textShadow = `
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff
`;
// 字体大小：最小 14px，首选 3vmin，最大 22px
btn.style.fontSize = 'clamp(14px, 3vmin, 22px)';
return btn;
}
const btnUp = createButton('▲');
const btnDown = createButton('▼');
// 绑定 Page Up 滚动逻辑 (向上滚动当前屏幕高度的85%)
btnUp.addEventListener('click', () => {
window.scrollBy({ top: -window.innerHeight * 0.85, behavior: 'instant' });
});
// 绑定 Page Down 滚动逻辑 (向下滚动当前屏幕高度的85%)
btnDown.addEventListener('click', () => {
window.scrollBy({ top: window.innerHeight * 0.85, behavior: 'instant' });
});
// 将按钮添加到页面
container.appendChild(btnUp);
container.appendChild(btnDown);
document.body.appendChild(container);
})();