用油猴脚本打造浏览器的“阅读进度记忆”功能

 你是否也有这样的困扰？

• 正在阅读一篇长技术文章，突然被消息打断，关闭页面后回来却找不到位置？
• 看论坛帖子看到一半，刷新一下，页面又回到了顶部？
• 想标记某个文档的阅读进度，但浏览器没有“继续阅读”功能？

虽然现代浏览器支持 恢复标签页，但并不能精确恢复到之前的滚动位置。而很多网站（尤其是非 SPA）也不会自动保存你的阅读进度。

最后搜索半天也没有找到在浏览器中能够记住阅读位置的工具。

无奈之下只能借助强大的AI和Tampermonkey（油猴）脚本，通过这几十行代码，让浏览器具备“记住阅读位置”的能力！

---

✨ 功能亮点

这个脚本实现了以下功能：

✅ 快捷键支持：Ctrl + Alt + S 保存位置，Ctrl + Alt + J 跳转到上次位置
✅ 自动提示：下次进入同一页面，自动弹出是否跳转
✅ 平滑滚动：跳转过程丝滑流畅，不突兀
✅ 持久存储：使用 GM_setValue 存储，重启浏览器也不丢失
✅ 全站通用：支持所有网站（可按需限制域名）

🧩 完整脚本代码

// ==UserScript==
// @name         记住阅读位置
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  右键或 Ctrl+Alt+S 记住滚动位置，下次访问提示跳转
// @author       You
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {
    'use strict';

    const STORAGE_KEY = 'scroll_position_';

    // 获取当前页面的唯一标识
    function getPageKey() {
        return location.href; // 可改为 location.pathname 以忽略参数
    }

    // 保存滚动位置
    function saveScrollPosition() {
        const key = getPageKey();
        const position = window.scrollY;
        GM_setValue(STORAGE_KEY + key, position);
        alert(`✅ 已记住当前阅读位置：${position}px`);
    }

    // 跳转到保存的位置
    function jumpToSavedPosition() {
        const key = getPageKey();
        const saved = GM_getValue(STORAGE_KEY + key, null);
        if (saved !== null) {
            window.scrollTo({
                top: saved,
                behavior: 'smooth'
            });
            console.log(`[记住阅读位置] 已跳转到: ${saved}px`);
        }
    }

    // 检查是否有保存的位置，并提示用户
    function checkAndPrompt() {
        const key = getPageKey();
        const saved = GM_getValue(STORAGE_KEY + key, null);
        if (saved !== null) {
            const go = confirm(`检测到上次阅读位置：${saved}px\n是否跳转到该位置？`);
            if (go) {
                jumpToSavedPosition();
            }
        }
    }

    // 注册右键菜单
    GM_registerMenuCommand('📌 记住当前阅读位置', saveScrollPosition);

    // ✅ 新增：监听快捷键 Ctrl + Alt + S
    document.addEventListener('keydown', (e) => {
        // 阻止默认行为（如浏览器快捷键）
        if (e.ctrlKey && e.altKey && e.key.toLowerCase() === 's') {
            e.preventDefault();
            saveScrollPosition();
        }
    });

    // 页面加载后检查是否需要提示
    window.addEventListener('load', () => {
        setTimeout(checkAndPrompt, 1000);
    });

    // （可选）Ctrl + Alt + J 跳转到上次位置
    document.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.altKey && e.key === 'j') {
            e.preventDefault();
            jumpToSavedPosition();
        }
    });

})();

🛠️ 如何使用？

第一步：安装油猴插件

• Chrome / Edge / Firefox：安装 Tampermonkey
• 安装后浏览器右上角会出现油猴图标

第二步：创建新脚本

1. 点击油猴图标 → “创建新脚本”
2. 删除默认内容，粘贴上面的代码
3. 保存（Ctrl + S）

第三步：开始使用

1. 打开任意网页（如知乎、掘金、MDN、博客）
2. 滚动到你想记住的位置
3. 按下 Ctrl + Alt + S 或点击扩展中的“📌 记住当前阅读位置”
4. 刷新或关闭后重新打开，会提示是否跳转

🎬 效果展示

1. 保存本次位置

2. 回到上次位置