前端技巧：如何让用户回到上次阅读的位置？

若尘的技术之旅
9,976 阅读4分钟

前端技巧：如何让用户回到上次阅读的位置？

在前端开发中，提升用户体验是我们的核心目标之一。一个简单但非常实用的功能就是：当用户再次打开某个网页时，能够自动滚动到他们上次离开的地方。这个功能看似不起眼，但却能显著增强用户的阅读体验。今天，我来分享一下我是如何实现它的，并且加入了一些优化，让你的代码更加高效和优雅。

一、功能需求分析

我们需要解决的核心问题是：

  1. 记录用户的滚动位置：当用户滚动页面时，实时保存他们的滚动距离。
  2. 恢复滚动位置：当用户重新加载页面或从其他地方返回时，能够准确地恢复到之前的位置。
  3. 优化性能：滚动事件会频繁触发，因此需要避免对性能造成过大影响。
  4. 清理过期数据：长时间积累的数据可能会占用过多存储空间，因此需要定期清理。

二、解决方案设计

为了实现上述功能，我们可以采用以下技术：

  1. 使用 localStorage 来保存滚动位置。
  2. 根据页面的唯一标识（如 URL）区分不同页面的滚动位置。
  3. 使用 节流（Throttle） 技术优化滚动事件的性能。
  4. 添加平滑滚动效果以提升用户体验。
  5. 定期清理超过一定时间未使用的滚动位置数据。

三、完整实现代码

以下是结合所有功能的完整代码：

1. 节流函数

// 节流函数：限制滚动事件的触发频率
function throttle(func, delay) {
    let lastCall = 0; // 上次触发的时间
    return function (...args) {
        const now = new Date().getTime();
        if (now - lastCall >= delay) { // 如果距离上次触发已经超过指定时间
            lastCall = now;
            func.apply(this, args); // 执行函数
        }
    };
}

2. 核心逻辑

// 获取当前页面的唯一标识（URL）
const pageKey = window.location.href;

// 监听滚动事件，保存滚动位置（带节流）
window.addEventListener('scroll', throttle(() => {
    const scrollPosition = window.scrollY;
    localStorage.setItem(pageKey, scrollPosition); // 保存滚动位置
    localStorage.setItem(`${pageKey}_timestamp`, Date.now()); // 记录时间戳
}, 300)); // 每300毫秒保存一次滚动位置

// 页面加载时恢复滚动位置
window.addEventListener('load', () => {
    const savedScrollPosition = localStorage.getItem(pageKey);
    if (savedScrollPosition !== null) {
        window.scrollTo({
            top: parseInt(savedScrollPosition),
            behavior: 'smooth' // 平滑滚动
        });
    }

    // 清理过期数据
    cleanOldScrollPositions();
});

3. 清理过期数据

// 清理过期数据函数
function cleanOldScrollPositions() {
    const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000; // 计算7天前的时间戳

    for (let key of Object.keys(localStorage)) {
        if (key.endsWith('_timestamp')) { // 只处理带有时间戳的键
            const timestamp = localStorage.getItem(key);
            if (parseInt(timestamp) < sevenDaysAgo) { // 如果时间戳超过7天
                const baseKey = key.replace('_timestamp', '');
                localStorage.removeItem(baseKey); // 删除滚动位置数据
                localStorage.removeItem(key); // 删除时间戳数据
            }
        }
    }
}

四、代码详解

1. 节流的作用

滚动事件会随着用户的滚动操作频繁触发，如果直接保存滚动位置，可能会导致性能问题。通过节流技术，我们限制了滚动事件的触发频率，确保每 300 毫秒只保存一次滚动位置。

2. 平滑滚动的效果

使用 window.scrollTo 的 behavior: 'smooth' 参数，可以让页面滚动变得更加自然，提升用户体验。

3. 数据清理机制

为了避免 localStorage 中积累过多无用数据，我们定期清理超过 7 天未使用的滚动位置记录。这样既能节省存储空间，又能保证数据的有效性。

五、注意事项

  1. 隐私问题：虽然 localStorage 是一个方便的存储方式，但如果涉及敏感信息，请考虑更安全的存储方案。
  2. 跨设备同步：如果希望用户在不同设备上也能同步滚动位置，可以结合后端服务或第三方工具（如 Firebase）实现。
  3. 性能优化：根据实际需求调整节流的时间间隔，例如将 300 毫秒改为 500 毫秒以进一步降低性能消耗。

六、总结

通过以上方法，我们成功实现了一个既实用又高效的“记住用户浏览位置”功能。这个功能不仅适用于文章页面，还可以扩展到电商商品详情页、长列表页面等场景。希望这篇文章对你有所帮助！如果你有任何疑问或改进意见，欢迎留言交流。

最后，别忘了给你的用户带来更好的体验哦！ 😊

avatar
文章
阅读
粉丝