html - 手工添加上次阅读的位置, 方便下次阅读

文章目录

• • [html - 手工添加上次阅读的位置, 方便下次阅读](#html - 手工添加上次阅读的位置, 方便下次阅读)
  • 概述
  • 笔记
  • END

html - 手工添加上次阅读的位置, 方便下次阅读

概述

在看一本电子书，有pdf格式的，但是比较喜欢看html格式的(复制比较方便)。

但是有个缺点，如果看到一半，关掉了html文件。下次再打开时，chrome显示html内容时，还是从头开始。

如何这样的话，还得自己找上次看到了哪里，很烦人。

笔记

查到可以自己修改html, 在尾部body标签上面加入js, 记录html滚动时的位置到浏览器的本地存储。

这样下次再打开该.html, chrome就会显示到上次看的位置，这样很方便，试了一下好使。

<div id="footer">
<div id="footer-text">
Version 2.1.73<br>
Last updated 2024-12-23 12:27:49 UTC
</div>
</div>
<!-- begin - 手工添加的JS, 用于保存当前的html文档浏览位置(滚动条位置) -->
<script>
  document.addEventListener("DOMContentLoaded",  function() {
      var savedPosition = localStorage.getItem('scrollPos'); 
      if (savedPosition !== null) {
          window.scrollTo(0,  parseInt(savedPosition));
      }
  });

  window.addEventListener("scroll",  function() {
      localStorage.setItem('scrollPos',  window.pageYOffset); 
  });
</script>
<!-- end - 手工添加的JS, 用于保存当前的html文档浏览位置(滚动条位置) -->
<!-- 打开html编辑, 在html末尾找到 </body>标签, 在这个标签前面添加自己的JS -->
</body>
</html>

END