Greasy Fork is available in English.
添加向上到顶部和向下到底部的翻页按钮（使用 Font Awesome 图标）
当前为
// ==UserScript==
// @name 页面翻动工具
// @namespace http://tampermonkey.net/
// @version 0.12
// @description 添加向上到顶部和向下到底部的翻页按钮（使用 Font Awesome 图标）
// @author You
// @match *://*/*
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// @icon https://pbs.twimg.com/profile_images/1891177391306805248/FZ1cVpxp_400x400.jpg
// ==/UserScript==
(function() {
'use strict';
// 动态加载 Font Awesome CSS（通过 GM_addStyle 或 CDN）
GM_addStyle(`
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
`);
// 创建按钮容器
const btnContainer = document.createElement('div');
btnContainer.style.position = 'fixed';
btnContainer.style.bottom = '20px';
btnContainer.style.right = '20px';
btnContainer.style.zIndex = '9999';
btnContainer.style.display = 'flex'; // 使用 Flex 布局方便控制间距
btnContainer.style.flexDirection = 'column'; // 按钮垂直排列
btnContainer.style.gap = '10px'; // 两个按钮之间的间距
// 创建“回到顶部”按钮
const topBtn = document.createElement('button');
topBtn.innerHTML = '<i class="fas fa-arrow-up"></i>'; // 使用 Font Awesome 向上箭头
topBtn.style.backgroundColor = 'rgba(185, 185, 185, 0.8)'; // 半透明灰色
topBtn.style.color = 'white';
topBtn.style.border = 'none';
topBtn.style.width = '40px';
topBtn.style.height = '40px';
topBtn.style.borderRadius = '50%'; // 圆形按钮
topBtn.style.cursor = 'pointer';
topBtn.style.fontSize = '18px'; // 调整图标大小
topBtn.style.display = 'flex';
topBtn.style.alignItems = 'center';
topBtn.style.justifyContent = 'center';
topBtn.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; // 更明显的阴影
topBtn.style.transition = 'transform 0.2s, opacity 0.3s'; // 添加平滑过渡
topBtn.style.opacity = '0'; // 初始隐藏
topBtn.style.pointerEvents = 'none'; // 隐藏时禁用点击
// 创建“到底部”按钮
const bottomBtn = document.createElement('button');
bottomBtn.innerHTML = '<i class="fas fa-arrow-down"></i>'; // 使用 Font Awesome 向下箭头
bottomBtn.style.backgroundColor = 'rgba(185, 185, 185, 0.8)'; // 半透明灰色
bottomBtn.style.color = 'white';
bottomBtn.style.border = 'none';
bottomBtn.style.width = '40px';
bottomBtn.style.height = '40px';
bottomBtn.style.borderRadius = '50%'; // 圆形按钮
bottomBtn.style.cursor = 'pointer';
bottomBtn.style.fontSize = '18px'; // 调整图标大小
bottomBtn.style.display = 'flex';
bottomBtn.style.alignItems = 'center';
bottomBtn.style.justifyContent = 'center';
bottomBtn.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)'; // 更明显的阴影
bottomBtn.style.transition = 'transform 0.2s, opacity 0.3s'; // 添加平滑过渡
// 添加悬停和点击动效
topBtn.addEventListener('mouseover', () => {
topBtn.style.transform = 'scale(1.1)';
topBtn.style.opacity = '0.9';
});
topBtn.addEventListener('mouseout', () => {
topBtn.style.transform = 'scale(1)';
topBtn.style.opacity = '1';
});
topBtn.addEventListener('click', () => {
topBtn.style.transform = 'scale(0.95)';
setTimeout(() => topBtn.style.transform = 'scale(1)', 100);
});
bottomBtn.addEventListener('mouseover', () => {
bottomBtn.style.transform = 'scale(1.1)';
bottomBtn.style.opacity = '0.9';
});
bottomBtn.addEventListener('mouseout', () => {
bottomBtn.style.transform = 'scale(1)';
bottomBtn.style.opacity = '1';
});
bottomBtn.addEventListener('click', () => {
bottomBtn.style.transform = 'scale(0.95)';
setTimeout(() => bottomBtn.style.transform = 'scale(1)', 100);
});
// 将按钮添加到容器
btnContainer.appendChild(topBtn);
btnContainer.appendChild(bottomBtn);
// 将容器添加到页面
document.body.appendChild(btnContainer);
// 按钮功能
topBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
bottomBtn.addEventListener('click', () => {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
});
// 监听滚动事件，控制“返回顶部”按钮的显示/隐藏
window.addEventListener('scroll', () => {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollThreshold = 100; // 下拉超过 100px 时显示按钮
if (scrollTop > scrollThreshold) {
topBtn.style.opacity = '1'; // 逐渐显示
topBtn.style.pointerEvents = 'auto'; // 启用点击
} else {
topBtn.style.opacity = '0'; // 隐藏
topBtn.style.pointerEvents = 'none'; // 禁用点击
}
});
})();