页面翻动工具

Greasy Fork is available in English.
页面翻动工具

添加向上到顶部和向下到底部的翻页按钮（优先使用 Font Awesome 图标，失败则用默认箭头）
当前为 2025-03-08 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name           页面翻动工具
// @namespace    http://tampermonkey.net/
// @version        0.17
// @description  添加向上到顶部和向下到底部的翻页按钮（优先使用 Font Awesome 图标，失败则用默认箭头）
// @author        Charlie
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// @icon         https://i.miji.bid/2025/03/08/990e81d6e8ebc90d181e091cc0c99699.jpeg
// ==/UserScript==

(function() {
    'use strict';

    // 添加基础样式（以下参数均可自定义）
    GM_addStyle(`
        /* 按钮容器样式 */
        .scroll-btn-container {
            position: fixed;   /* 固定定位 */
            bottom: 40px;     /* 距离底部距离 */
            right: 40px;      /* 距离右侧距离 */
            z-index: 9999;    /* 确保在最上层 */
            display: flex;
            flex-direction: column;  /* 垂直排列 */
            gap: 10px;        /* 按钮间距 */
        }

        /* 按钮基础样式 */
        .scroll-btn {
            background-color: rgba(106,106,127, 0.2); /* 背景色（RGBA格式） */
            color: white;     /* 图标颜色 */
            border: none;
            width: 36px;      /* 按钮宽度 */
            height: 36px;     /* 按钮高度 */
            border-radius: 50%; /* 圆形按钮（改为10px可得圆角矩形） */
            cursor: pointer;
            font-size: 16px;  /* 图标大小 */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s, opacity 0.3s; /* 动画过渡时间 */
        }

        /* 顶部按钮初始状态 */
        .scroll-btn-top {
            opacity: 0;       /* 初始透明度 */
            pointer-events: none; /* 禁止交互 */
        }
    `);

    // 创建按钮容器
    const btnContainer = document.createElement('div');
    btnContainer.className = 'scroll-btn-container';

    // Font Awesome 配置（可替换其他图标库）
    let useFontAwesome = false;
    const faLink = document.createElement('link');
    faLink.rel = 'stylesheet';
    // 使用 FontAwesome 6.5.1 版本（可修改版本号或CDN地址）
    faLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css';
    document.head.appendChild(faLink);

    // 图标加载检测
    faLink.onload = () => { useFontAwesome = true; };
    faLink.onerror = () => { useFontAwesome = false; };

    // 创建按钮
    const topBtn = document.createElement('button');
    topBtn.className = 'scroll-btn scroll-btn-top';
    // 使用箭头图标（可替换为其他FontAwesome图标，如fa-chevron-up）
    topBtn.innerHTML = useFontAwesome ? '<i class="fas fa-arrow-up"></i>' : '↑';

    const bottomBtn = document.createElement('button');
    bottomBtn.className = 'scroll-btn';
    bottomBtn.innerHTML = useFontAwesome ? '<i class="fas fa-arrow-down"></i>' : '↓';

    // 按钮交互效果（可自定义参数）
    function addButtonEffects(btn) {
        btn.addEventListener('mouseover', () => {
            btn.style.transform = 'scale(1)';  /* 悬浮放大倍数 */
            btn.style.opacity = '0.9';          /* 悬浮透明度 */
        });
        btn.addEventListener('mouseout', () => {
            btn.style.transform = 'scale(1)';   /* 恢复原始大小 */
            btn.style.opacity = '1';            /* 恢复不透明度 */
        });
        btn.addEventListener('click', () => {
            btn.style.transform = 'scale(0.9)'; /* 点击缩小效果 */
            setTimeout(() => btn.style.transform = 'scale(1)', 100); /* 动画恢复时间 */
        });
    }

    // 应用交互效果
    addButtonEffects(topBtn);
    addButtonEffects(bottomBtn);

    // 将按钮添加到容器
    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;

        if (scrollTop > scrollThreshold) {
            topBtn.style.opacity = '1';
            topBtn.style.pointerEvents = 'auto';
        } else {
            topBtn.style.opacity = '0';
            topBtn.style.pointerEvents = 'none';
        }
    });

    // 确保文档加载完成后添加按钮
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        document.body.appendChild(btnContainer);
    } else {
        document.addEventListener('DOMContentLoaded', () => {
            document.body.appendChild(btnContainer);
        });
    }
})();