贴心小秘诀：让滚动条记住你的阅读进度

2023-09-25 22:58:09

如何让页面滚动条自动滚回上次浏览位置？

在浩瀚的网络世界中，我们时常会遇到需要暂时离开正在浏览的页面，稍后回来继续阅读的情况。然而，当我们再次回到页面时，不得不从头开始滚动查找之前的阅读位置，这无疑令人心烦意乱。

本篇文章将分享两种简单易行的解决方案，让你的滚动条自动滚回上次浏览位置，宛如页面为你贴心设置了书签一般。

方法一：利用 JavaScript

JavaScript 是一种强大的编程语言，可以实现各种浏览器端的功能。我们可以利用 JavaScript 来实现滚动条自动回滚：

window.onbeforeunload = function() {
  localStorage.setItem("scrollPosition", window.scrollY);
};

window.onload = function() {
  if (localStorage.getItem("scrollPosition")) {
    window.scrollTo(0, localStorage.getItem("scrollPosition"));
  }
};

这段代码的作用原理如下：

window.onbeforeunload 事件会在浏览器页面即将关闭或离开时触发。
在该事件中，我们利用 localStorage API 将当前窗口的滚动位置（window.scrollY）存储到本地存储中。
当页面重新加载时，window.onload 事件触发。
在该事件中，我们检查 localStorage 中是否有存储的滚动位置。如果有，则将页面滚动到该位置。

方法二：利用 CSS 和会话存储

除了 JavaScript 之外，我们还可以利用 CSS 和会话存储来实现滚动条自动回滚：

body {
  scroll-behavior: smooth;
}

window.addEventListener("load", function() {
  if (sessionStorage.getItem("scrollPosition")) {
    window.scrollTo(0, sessionStorage.getItem("scrollPosition"));
  }
});

window.addEventListener("beforeunload", function() {
  sessionStorage.setItem("scrollPosition", window.scrollY);
});