☰

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浏览体验！ 🎉

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址