FreeCodeCamp产品落地页项目a标签锚点跳转失效问题求助

问题定位 #

• HTML标签嵌套顺序错误：你的<ul>标签写在<nav>内部，但闭合顺序是先写</nav>再写</ul>，错误的嵌套会导致浏览器解析DOM结构异常，影响锚点识别。
  错误代码片段：

  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#Benefits">Benefits</a></li>
      <li><a class="nav-link" href="#Features">Features</a></li>
      <li><a class="nav-link" href="#Pricing">Pricing</a></li>
  </nav>
  </ul>
  

  修正后应该先闭合<ul>再闭合<nav>：

  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#Benefits">Benefits</a></li>
      <li><a class="nav-link" href="#Features">Features</a></li>
      <li><a class="nav-link" href="#Pricing">Pricing</a></li>
    </ul>
  </nav>
  

• 缺少对应锚点元素：你目前仅提供了id="Benefits"的区块代码，没有id="Features"和id="Pricing"的对应元素，点击这两个导航链接自然无法跳转。
• CSS异常偏移导致页面高度计算错误：
  1. p标签设置了margin: -33px，负外边距会导致元素位置偏移、页面整体高度计算异常
  2. .body-img设置了position: relative; top: -345px，相对定位的偏移不会改变元素原本占据的文档流位置，会导致页面可视区域和实际文档流位置错位，锚点跳转的计算位置和你肉眼看到的位置不符
• 现有内容高度不足：如果你的页面整体内容高度小于浏览器视口高度，锚点跳转也不会有肉眼可见的滚动效果。

修复步骤 #

1. 先修正所有HTML标签嵌套错误，确保所有标签正确闭合
2. 补全id="Features"和id="Pricing"的对应区块，保证每个导航链接的href属性值都有对应id的元素存在
3. 调整CSS的负边距和相对定位参数，或者改用flex布局实现元素排版，避免用负偏移硬挪元素位置
4. 给每个锚点区块设置足够的上下内边距，保证区块之间有足够的高度差，跳转效果更明显

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