Jupyter Notebook 一键返回顶部增强脚本

功能简介

这是专为本地运行的 Jupyter Notebook 设计的用户脚本，核心解决长代码/长文本笔记本滚动到顶部繁琐的问题，无需手动拖动滚动条，一键即可回到页面顶部，兼顾操作效率与界面美观。

• 核心功能：新增悬浮式「返回顶部」按钮，滚动内容超过300px自动显示，点击即刻回到顶部
• 界面设计：圆形蓝色主题按钮，固定在页面左侧不遮挡核心内容，hover 时视觉反馈明显
• 智能显隐：滚动距离＜300px时自动隐藏按钮，避免界面冗余
• 场景适配：完美适配本地 Jupyter Notebook（localhost:8888）所有笔记本页面
• 无侵入性：仅新增悬浮按钮，不修改原有页面结构和功能，不影响 Notebook 正常使用

功能特点

核心体验优化

• ⚡ 一键直达：点击按钮即刻回到页面顶部，无需手动拖动滚动条，提升长文档操作效率
• 🔍 智能显隐：滚动距离超过300px时按钮自动显示，回到顶部后自动隐藏，不占用界面空间
• 🎨 视觉设计：圆形按钮+蓝色主调，hover 时轻微放大+颜色加深，兼顾醒目度与美观度
• 📍 固定定位：按钮固定在页面左侧10px、垂直15%位置，不遮挡代码/文本区域，适配不同屏幕尺寸
• 🚀 无延迟响应：点击无过渡动画，保证操作即时生效，符合高效开发场景需求

兼容性与安全性

• 🛡️ 域名限定：仅对本地 Jupyter Notebook（localhost:8888）生效，避免误触发其他网站
• 🔧 无侵入修改：仅添加悬浮元素，不篡改页面原有 DOM 结构和 JS 逻辑
• 🖥️ 多分辨率适配：按钮尺寸、位置自适应不同屏幕大小，兼容笔记本/台式机显示比例

安装方法

1. 确保浏览器已安装用户脚本管理器扩展：

   • Tampermonkey (推荐)
   • Violentmonkey
   • 脚本猫 (国产，中文友好)

2. 点击下方链接安装脚本：
   

3. 或者手动创建新脚本并复制完整代码

适用页面

• http://localhost:8888/notebooks/*
• http://127.0.0.1:8888/notebooks/*

操作说明

注意：脚本仅对本地运行的 Jupyter Notebook 生效，远程/JupyterLab 需修改 @match 规则

技术细节

核心配置

// 核心配置参数
const SHOW_THRESHOLD = 300; // 按钮显示的滚动阈值(px)
const BUTTON_POSITION = {
  left: '10px',    // 按钮左侧距离
  top: '15%'       // 按钮垂直位置
};
const BUTTON_STYLE = {
  width: '40px',   // 按钮宽度
  height: '40px',  // 按钮高度
  bgColor: '#1677ff', // 按钮背景色
  hoverColor: '#0958d9' // hover背景色
};

核心功能实现

// 1. 创建返回顶部按钮
function createScrollToTopButton() {
  const button = document.createElement('button');
  button.id = 'jupyter-scroll-to-top';
  button.innerText = '↑';
  // 设置按钮样式（固定定位、视觉样式）
  Object.assign(button.style, {
    position: 'fixed',
    left: BUTTON_POSITION.left,
    top: BUTTON_POSITION.top,
    width: BUTTON_STYLE.width,
    height: BUTTON_STYLE.height,
    backgroundColor: BUTTON_STYLE.bgColor,
    color: 'white',
    border: 'none',
    borderRadius: '50%',
    cursor: 'pointer',
    display: 'none',
    zIndex: '9999',
    fontSize: '20px',
    transition: 'all 0.2s ease'
  });
  // hover效果
  button.addEventListener('mouseover', () => {
    button.style.backgroundColor = BUTTON_STYLE.hoverColor;
    button.style.transform = 'scale(1.1)';
  });
  button.addEventListener('mouseout', () => {
    button.style.backgroundColor = BUTTON_STYLE.bgColor;
    button.style.transform = 'scale(1)';
  });
  // 点击返回顶部
  button.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'instant' });
  });
  document.body.appendChild(button);
  return button;
}

// 2. 监听滚动事件控制按钮显隐
function listenScroll() {
  const button = document.getElementById('jupyter-scroll-to-top');
  window.addEventListener('scroll', () => {
    if (window.scrollY > SHOW_THRESHOLD) {
      button.style.display = 'block';
    } else {
      button.style.display = 'none';
    }
  });
}

执行流程

1. 页面加载完成后创建悬浮按钮（默认隐藏）
2. 监听页面滚动事件，判断滚动距离是否超过阈值
3. 滚动＞300px时显示按钮，＜300px时隐藏
4. 点击按钮触发即时滚动到顶部，无过渡动画保证效率
5. 按钮添加hover视觉反馈，提升交互体验

配置选项

常见问题

Q: 脚本没有生效怎么办？

A:

1. 检查控制台（F12）是否有错误信息
2. 确认当前页面URL是 localhost:8888/notebooks/* 格式
3. 刷新Notebook页面重试（脚本在DOMContentLoaded后执行）
4. 确认脚本管理器已启用该脚本

Q: 按钮遮挡了代码内容怎么办？

A:

1. 修改脚本中 BUTTON_POSITION 配置，调整 left/top 值
2. 例如：将 left: '10px' 改为 right: '10px' 移至右侧
3. 保存修改后刷新页面即可生效

Q: 想要添加滚动动画怎么办？

A:

1. 找到代码中 window.scrollTo 方法，修改为：

   window.scrollTo({ top: 0, behavior: 'smooth' });
   

2. 该修改会让滚动有顺滑过渡，但牺牲一点即时性

Q: 适配JupyterLab需要修改什么？

A:

1. 修改脚本头部的 @match 规则为 JupyterLab 的访问地址
2. 例如：@match http://localhost:8888/lab/*
3. 可能需要调整按钮样式以适配JupyterLab界面

更新日志

v1.1

• 🎉 初始版本：实现核心返回顶部功能
• ⚡ 智能显隐：滚动阈值控制按钮显示/隐藏
• 🎨 视觉设计：添加悬浮按钮和hover反馈
• 🔧 域名限定：仅对本地Notebook生效，保证安全性

免责声明

本脚本仅供学习交流使用，请勿用于商业用途。脚本仅添加悬浮元素，未修改Jupyter Notebook核心功能，使用脚本产生的一切后果由使用者自行承担。

反馈与支持

如果您在使用过程中遇到问题或有改进建议，请通过以下方式反馈：

• 在脚本评论区留言
• 提交Issue到脚本仓库
• 反馈Jupyter版本更新导致的脚本失效问题

温馨提示：

1. Jupyter Notebook版本更新可能导致页面结构变化，如按钮失效请关注最新版本
2. 如需适配远程Jupyter服务，需修改脚本的@match规则
3. 使用过程中如遇问题，可按F12查看控制台日志定位问题