☰

GitHub 返回顶部按钮

为GitHub的所有页面添加返回顶部按钮

// ==UserScript==
// @name         GitHub 返回顶部按钮
// @namespace    http://mrx.la
// @version      1.0
// @description  为GitHub的所有页面添加返回顶部按钮
// @author       Mobius
// @match        https://github.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // 创建返回顶部按钮
    function createBackToTopButton() {
        const button = document.createElement('div');
        button.id = 'github-back-to-top';
        button.innerHTML = '🔝';
        button.title = '返回顶部';
        
        // 设置按钮样式
        button.style.cssText = `
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background-color: #24292f;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
            user-select: none;
        `;
        
        // 鼠标悬停效果
        button.addEventListener('mouseenter', function() {
            this.style.backgroundColor = '#32383f';
            this.style.transform = 'scale(1.1)';
        });
        
        button.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '#24292f';
            this.style.transform = 'scale(1)';
        });
        
        // 点击事件 - 平滑滚动到顶部
        button.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        return button;
    }
    
    // 控制按钮显示/隐藏
    function toggleButtonVisibility(button) {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > 300) {
            button.style.display = 'flex';
        } else {
            button.style.display = 'none';
        }
    }
    
    // 初始化脚本
    function init() {
        // 检查是否已经存在按钮
        if (document.getElementById('github-back-to-top')) {
            return;
        }
        
        // 创建并添加按钮到页面
        const button = createBackToTopButton();
        document.body.appendChild(button);
        
        // 监听滚动事件
        let ticking = false;
        window.addEventListener('scroll', function() {
            if (!ticking) {
                requestAnimationFrame(function() {
                    toggleButtonVisibility(button);
                    ticking = false;
                });
                ticking = true;
            }
        });
        
        // 初始检查是否需要显示按钮
        toggleButtonVisibility(button);
    }
    
    // 页面加载完成后初始化
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    // 监听页面变化（GitHub使用PJAX进行页面切换）
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                // 延迟执行以确保页面完全加载
                setTimeout(init, 100);
            }
        });
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
    
})();