GitHub 返回顶部按钮

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

作者
Mr-ByeBye
今日安裝
0
安裝總數
0
評價
0 0 0
版本
1.0
建立日期
2025-09-07
更新日期
2025-09-07
尺寸
3.6 KB
授權條款
未知
腳本執行於

GitHub 返回顶部按钮

一个简单实用的油猴脚本,为GitHub的所有页面添加返回顶部按钮。

功能特点

  • 🚀 智能显示:当页面滚动超过300像素时自动显示按钮
  • 🎯 平滑滚动:点击按钮平滑滚动到页面顶部
  • 🎨 美观设计:采用GitHub官方蓝色主题,圆形按钮设计
  • 📱 响应式:鼠标悬停时有缩放和颜色变化效果
  • 🔄 兼容性强:支持GitHub的PJAX页面切换,在所有GitHub页面都能正常工作

安装方法

  1. 首先安装油猴插件(Tampermonkey)

    • Chrome: 在Chrome网上应用店搜索"Tampermonkey"
    • Firefox: 在Firefox附加组件商店搜索"Tampermonkey"
    • Edge: 在Microsoft Edge加载项商店搜索"Tampermonkey"
  2. 安装脚本

    • 打开Tampermonkey管理面板
    • 点击"创建新脚本"
    • github-back-to-top.user.js文件中的内容复制粘贴到编辑器中
    • 按Ctrl+S保存脚本
  3. 启用脚本

    • 确保脚本状态为"已启用"
    • 访问任意GitHub页面即可看到返回顶部按钮

使用说明

  • 当你在GitHub页面向下滚动超过300像素时,右下角会出现一个蓝色的圆形按钮
  • 点击按钮即可平滑滚动回到页面顶部
  • 按钮会根据滚动位置自动显示或隐藏

适用页面

该脚本适用于GitHub的所有页面,包括但不限于:

  • 项目主页
  • 代码浏览页面
  • Issues页面
  • Pull Requests页面
  • 搜索结果页面
  • 用户主页
  • 组织页面

技术特性

  • 使用requestAnimationFrame优化滚动性能
  • 采用MutationObserver监听页面变化,确保在PJAX切换后仍能正常工作
  • CSS3过渡动画提供流畅的用户体验
  • 防重复创建机制,避免多个按钮同时存在

自定义配置

如果你想自定义按钮的样式或行为,可以修改脚本中的以下参数:

  • bottom: 30px; right: 30px; - 按钮位置
  • width: 50px; height: 50px; - 按钮大小
  • background-color: #0969da; - 按钮颜色
  • scrollTop > 300 - 显示按钮的滚动阈值

版本信息

  • 版本:1.0
  • 兼容性:支持所有现代浏览器
  • 依赖:各种油猴插件

享受更便捷的GitHub浏览体验! 🎉