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

文章目录

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

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

概述

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

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

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

笔记

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

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

html 复制代码
<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

相关推荐
iphone1087 小时前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
一天睡25小时11 小时前
一款减轻前端图片命名工作量的图片转换器
前端·javascript·html
梅纳德11 小时前
如何发现一个网站的全部页面?7种方法
html
一只小风华~14 小时前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
天天扭码1 天前
《很全面的前端面试题》——HTML篇
前端·面试·html
到底起什么网名才能不重名1 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
默默地离开1 天前
Blob二进制处理的王者
前端·javascript·html
西西木科技丨Shopify开发机构2 天前
如何在 Shopify 中建立重定向
前端·html
Liudef062 天前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_881244402 天前
javaweb———html
前端·javascript·html