如何实现HTML与CSS页面重新打开时定位用户上次聚焦段落

纯HTML和CSS搞不定数据存储与动态定位的逻辑，得结合JavaScript来实现，具体步骤如下：

1. 给段落添加唯一标识 #

先给页面里的每个段落（比如<p>标签）设置唯一id，方便后续精准定位：

<p id="para-1" tabindex="0">第一段内容...</p>
<p id="para-2" tabindex="0">第二段内容...</p>
<p id="para-3" tabindex="0">第三段内容...</p>

注：加tabindex="0"是为了让段落能被鼠标点击或键盘聚焦，默认<p>标签是不可聚焦的。

2. 监听用户操作，记录聚焦位置 #

当用户点击或聚焦到某个段落时，把该段落的id存在浏览器的localStorage里——这个存储会在页面关闭后保留数据：

// 获取所有带id的段落
const paragraphs = document.querySelectorAll('p[id]');

// 给每个段落绑定事件
paragraphs.forEach(para => {
  para.addEventListener('focus', saveLastFocus);
  para.addEventListener('click', saveLastFocus);
});

function saveLastFocus(e) {
  // 把当前段落的id存到localStorage
  localStorage.setItem('lastFocusedPara', e.target.id);
}

3. 页面加载时自动定位 #

等页面加载完成后，读取localStorage里的记录，找到对应的段落并滚动过去，同时让它获得聚焦：

window.addEventListener('load', () => {
  const lastParaId = localStorage.getItem('lastFocusedPara');
  if (lastParaId) {
    const targetPara = document.getElementById(lastParaId);
    if (targetPara) {
      // 平滑滚动到段落顶部，不需要平滑的话把behavior改成'auto'
      targetPara.scrollIntoView({ behavior: 'smooth', block: 'start' });
      // 让段落处于聚焦状态
      targetPara.focus();
    }
  }
});

额外说明 #

• localStorage是同源限制的，只有同一域名下的页面能共享这个记录；
• 如果用户手动清除浏览器缓存或本地存储，之前的记录会丢失；
• 要是想更精准，可以改成监听滚动事件，记录当前视口中最显眼的段落，而不只是点击/聚焦的段落。

内容的提问来源于stack exchange，提问作者Abinawan Bhattarai