这是专为本地运行的 Jupyter Notebook 设计的用户脚本，核心解决长代码/长文本笔记本滚动到顶部繁琐的问题，无需手动拖动滚动条，一键即可回到页面顶部，兼顾操作效率与界面美观。
确保浏览器已安装用户脚本管理器扩展：
点击下方链接安装脚本：
或者手动创建新脚本并复制完整代码
http://localhost:8888/notebooks/*http://127.0.0.1:8888/notebooks/*| 操作方式 | 功能 | 说明 |
|---|---|---|
| 点击悬浮按钮 | 返回页面顶部 | 按钮显示时点击，即刻回到 Notebook 顶部 |
| 滚动页面 | 按钮显隐 | 滚动＞300px显示，＜300px隐藏 |
| 鼠标悬浮按钮 | 视觉反馈 | 按钮轻微放大+颜色加深，提示可点击 |
注意：脚本仅对本地运行的 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';
}
});
}
| 参数 | 默认值 | 说明 |
|---|---|---|
| SHOW_THRESHOLD | 300 | 按钮显示的滚动阈值(px) |
| BUTTON_POSITION | left:10px, top:15% | 按钮固定位置 |
| BUTTON_STYLE | 40px×40px，#1677ff | 按钮尺寸和主题色 |
| 触发方式 | 点击 | 点击按钮返回顶部 |
A:
localhost:8888/notebooks/* 格式A:
BUTTON_POSITION 配置，调整 left/top 值left: '10px' 改为 right: '10px' 移至右侧A:
window.scrollTo 方法，修改为：window.scrollTo({ top: 0, behavior: 'smooth' });
A:
@match 规则为 JupyterLab 的访问地址@match http://localhost:8888/lab/*本脚本仅供学习交流使用，请勿用于商业用途。脚本仅添加悬浮元素，未修改Jupyter Notebook核心功能，使用脚本产生的一切后果由使用者自行承担。
如果您在使用过程中遇到问题或有改进建议，请通过以下方式反馈：
温馨提示：