页面返回顶部/底部

页面翻动工具

添加向上到顶部和向下到底部的翻页按钮（使用 Font Awesome 图标）
As of 2025-02-22. See the latest version.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         页面翻动工具
// @namespace    http://tampermonkey.net/
// @version      0.11
// @description  添加向上到顶部和向下到底部的翻页按钮（使用 Font Awesome 图标）
// @author       You
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// @icon         https://i.scdn.co/image/ab67616d0000b273897f73256b9128a9d70eaf66
// ==/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'; // 禁用点击
        }
    });
})();