☰

页面返回顶部/底部

添加向上到顶部和向下到底部的翻页按钮（使用默认箭头图标）

// ==UserScript==
// @name           页面返回顶部/底部 
// @version        0.22
// @description    添加向上到顶部和向下到底部的翻页按钮（使用默认箭头图标）
// @author         Grok
// @match          *://*/*
// @grant          GM_addStyle
// @run-at         document-start
// @license        MIT
// @icon            https://i.miji.bid/2025/03/15/560664f99070e139e28703cf92975c73.jpeg
// @namespace http://tampermonkey.net/
// ==/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';

    // 创建按钮（直接使用默认箭头）
    const topBtn = document.createElement('button');
    topBtn.className = 'scroll-btn scroll-btn-top';
    topBtn.innerHTML = '↑'; // 默认向上箭头

    const bottomBtn = document.createElement('button');
    bottomBtn.className = 'scroll-btn';
    bottomBtn.innerHTML = '↓'; // 默认向下箭头

    // 按钮交互效果（可自定义参数）
    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);
        });
    }
})();