如何实现带「查看更多」按钮页面返回时保留展开状态并定位原位置

嘿，这个问题确实挺影响用户体验的，我来给你分享几个可行的解决方案，完美解决返回后需要重新操作的麻烦！核心思路就是记录状态+恢复状态，下面分步骤给你拆解：

1. 用本地存储记录内容的展开状态 #

我们可以利用localStorage或者sessionStorage来保存内容区块的展开/收起状态——前者会永久保存（除非用户清缓存），后者只在当前会话有效（关闭浏览器就重置），你可以根据需求选。

当用户点击「查看更多」/「收起」按钮时，把当前状态存入存储；页面加载（包括从外部链接返回刷新后）时，读取存储里的状态，自动恢复展开/收起状态。

2. 记录并恢复滚动位置 #

光恢复展开状态还不够，用户还需要回到之前的滚动位置。这里有两种方式：

方式一：利用浏览器原生的滚动恢复 #

浏览器本身有scrollRestoration属性，可以自动恢复滚动位置，不过有时候在内容高度变化（比如展开内容后）的场景下可能不够精准，你可以先试试这个简单的方案：

// 开启原生滚动恢复
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'auto';
}

方式二：手动记录滚动位置 #

如果原生方案不够精准，就手动把滚动位置存入本地存储，在页面加载或后退时恢复：

• 用户离开页面时（比如点击外部链接前）记录当前滚动位置
• 页面加载/后退时，先恢复内容展开状态，再滚动到记录的位置

3. 完整代码示例 #

下面是结合两种需求的完整实现，直接就能用：

HTML结构 #

<div class="content-block">
  <div class="visible-content">
    这里是默认显示的简短内容，比如一段摘要...
  </div>
  <div class="hidden-content" id="hiddenContent">
    这是展开后的长内容，里面包含<a href="https://example.com" target="_blank">外部站点链接</a>，还有更多文本、图片之类的内容，长度比较长...
  </div>
  <button id="toggleBtn">查看更多</button>
</div>

CSS样式 #

.hidden-content {
  display: none;
  margin-top: 1rem;
}
.hidden-content.expanded {
  display: block;
}
#toggleBtn {
  margin-top: 1rem;
  cursor: pointer;
}

JavaScript逻辑 #

const toggleBtn = document.getElementById('toggleBtn');
const hiddenContent = document.getElementById('hiddenContent');
const STORAGE_KEY_EXPANDED = 'content_expanded_status';
const STORAGE_KEY_SCROLL = 'content_scroll_position';

// 页面加载时恢复状态
window.addEventListener('load', () => {
  // 恢复展开状态
  const isExpanded = localStorage.getItem(STORAGE_KEY_EXPANDED) === 'true';
  if (isExpanded) {
    hiddenContent.classList.add('expanded');
    toggleBtn.textContent = '收起';
  } else {
    hiddenContent.classList.remove('expanded');
    toggleBtn.textContent = '查看更多';
  }

  // 恢复滚动位置（延迟执行，确保内容展开后高度稳定）
  setTimeout(() => {
    const savedScroll = localStorage.getItem(STORAGE_KEY_SCROLL);
    if (savedScroll) {
      window.scrollTo(0, parseInt(savedScroll));
    }
  }, 100);
});

// 切换展开/收起状态
toggleBtn.addEventListener('click', () => {
  const isExpanded = hiddenContent.classList.contains('expanded');
  if (isExpanded) {
    hiddenContent.classList.remove('expanded');
    toggleBtn.textContent = '查看更多';
    localStorage.setItem(STORAGE_KEY_EXPANDED, 'false');
  } else {
    hiddenContent.classList.add('expanded');
    toggleBtn.textContent = '收起';
    localStorage.setItem(STORAGE_KEY_EXPANDED, 'true');
  }
});

// 离开页面时记录滚动位置
window.addEventListener('beforeunload', () => {
  localStorage.setItem(STORAGE_KEY_SCROLL, window.scrollY.toString());
});

// 处理浏览器后退事件（从外部链接返回时触发）
window.addEventListener('popstate', () => {
  const isExpanded = localStorage.getItem(STORAGE_KEY_EXPANDED) === 'true';
  if (isExpanded) {
    hiddenContent.classList.add('expanded');
    toggleBtn.textContent = '收起';
    // 延迟滚动，确保内容展开完成
    setTimeout(() => {
      const savedScroll = localStorage.getItem(STORAGE_KEY_SCROLL);
      if (savedScroll) {
        window.scrollTo(0, parseInt(savedScroll));
      }
    }, 100);
  }
});

一些注意事项 #

• 如果页面有多个这样的内容区块，记得给每个区块设置唯一ID，存储时用不同的key（比如content_expanded_status_block1），避免状态冲突。
• 如果你希望关闭浏览器后重置状态，把localStorage换成sessionStorage即可。
• 延迟滚动的100ms是为了确保内容展开后页面高度已经更新，滚动位置更准确，你可以根据实际情况调整这个时间。

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