历史回退时维持section隐藏状态问题：首页滚动隐藏section1后返回需保持

嘿，这个问题我做项目时也碰到过，核心就是要记住用户离开首页时的界面状态，然后从详情页返回时自动恢复。下面给你几个实用的实现思路：

方法一：用sessionStorage存储状态（推荐） #

这是最简单直接的方案，sessionStorage会在当前浏览器会话中保存数据，只要用户没关闭标签页，数据就不会消失。

• 步骤1：滚动到section2时，存储状态并隐藏section1

  // 监听滚动事件，判断是否进入section2
  window.addEventListener('scroll', () => {
    const section2 = document.getElementById('section2');
    const rect = section2.getBoundingClientRect();
    // 当section2进入视口（可根据你的需求调整判断条件）
    if (rect.top <= window.innerHeight / 2) {
      document.getElementById('section1').style.display = 'none';
      // 存储状态到sessionStorage
      sessionStorage.setItem('showOnlySection2', 'true');
    }
  });
  

• 步骤2：页面初始化时（包括返回首页）恢复状态

  window.addEventListener('DOMContentLoaded', () => {
    const shouldShowOnlySection2 = sessionStorage.getItem('showOnlySection2') === 'true';
    if (shouldShowOnlySection2) {
      document.getElementById('section1').style.display = 'none';
    }
  });
  

• 可选：如果需要用户回到顶部时恢复显示section1，可以加个逻辑

  window.addEventListener('scroll', () => {
    if (window.scrollY === 0) {
      document.getElementById('section1').style.display = 'block';
      sessionStorage.removeItem('showOnlySection2');
    }
  });
  

方法二：结合history.state传递状态 #

这个方法会把状态绑定到浏览器的历史记录中，适合需要和前进后退按钮联动的场景。

• 步骤1：跳转详情页前，给历史记录添加状态

  // 假设你的portfolio跳转按钮点击事件
  document.querySelectorAll('.portfolio-item').forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      const detailUrl = item.getAttribute('href');
      // 添加状态到历史记录
      history.pushState({ showOnlySection2: true }, '', detailUrl);
      // 跳转到详情页
      window.location.href = detailUrl;
    });
  });
  

• 步骤2：监听浏览器的popstate事件，返回时恢复状态

  window.addEventListener('popstate', (event) => {
    if (event.state?.showOnlySection2) {
      document.getElementById('section1').style.display = 'none';
    }
  });
  

注意：这个方法的局限性是，如果用户直接刷新首页或者从其他页面进入，history.state不会有这个状态，所以建议和sessionStorage结合使用，双重保障。

方法三：URL参数传递状态（可选） #

如果需要用户刷新首页后也能保持状态，可以用URL参数来传递，但会让URL带上额外参数，看你是否接受。

• 步骤1：跳转详情页时，在URL后添加参数

  document.querySelectorAll('.portfolio-item').forEach(item => {
    item.addEventListener('click', (e) => {
      e.preventDefault();
      const detailUrl = `${item.getAttribute('href')}?fromPortfolio=true`;
      window.location.href = detailUrl;
    });
  });
  

• 步骤2：首页加载时读取URL参数

  window.addEventListener('DOMContentLoaded', () => {
    const urlParams = new URLSearchParams(window.location.search);
    const fromPortfolio = urlParams.get('fromPortfolio');
    if (fromPortfolio === 'true') {
      document.getElementById('section1').style.display = 'none';
      // 可选：移除URL参数，避免影响后续操作
      history.replaceState(null, '', window.location.pathname);
    }
  });
  

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