HTML/CSS开发返回主页面时第二区块内容显示在首页如何解决？

问题排查结果 #

核心错误原因 #

1. 页面结构嵌套错误：规则页的锚点<a name="about">和对应内容被放在了工作人员页的.frontpage容器内部，导致锚点跳转时只会在.frontpage的内部滚动区域移动，返回工作人员页时内部滚动位置错位，看起来像是布局崩溃。
2. 语法错误：
   • CSS导入语句嵌套了两层@import url()，语法不合法，会导致字体加载失败
   • HTML元素id属性值错误携带#符号（如id="#Name"），id属性本身不需要加#，仅CSS选择器使用时才需要加前缀
3. 已废弃标签使用：用了HTML5已经移除的<center>标签，存在潜在的兼容性风险

修复步骤 #

• 调整页面结构：将工作人员页、规则页两个区块调整为平级，都放在外层高度固定、溢出隐藏的容器中：

<!-- 外层滚动容器 -->
<div style="height: 550px; margin-top: 10px; overflow: hidden; ">
  <!-- 工作人员页 独立区块 -->
  <a name="frontpage"></a>
  <div class="frontpage" style="height: 100%; overflow-y: auto; overflow-x: hidden;">
    <!-- 原有工作人员列表代码全部放这里 -->
  </div>
  <!-- 规则页 独立平级区块 -->
  <a name="about"></a>
  <div style="height: 100%; padding: 20px; overflow-y: auto; overflow-x: hidden; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
    <!-- 原有规则相关的.info容器代码全部放这里 -->
  </div>
</div>

• 修正CSS导入语句：将CSS开头的导入代码替换为：

@import url('https://fonts.googleapis.com/css2?family=Petemoss&family=Shadows+Into+Light&family=Titillium+Web:wght@600&display=swap');

• 修正id命名：将所有HTML元素id属性中的#删除，比如id="#Photo"改为id="Photo"
• （可选优化）移除<center>标签，给body添加以下样式实现全局居中，兼容性更好：

body {
  /* 保留原有背景相关样式 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

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