HTML导航栏滚动至指定区域未到位问题（求无JS解决方案）

问题核心是固定在顶部的导航栏占据了视口空间，默认锚点滚动会将目标元素对齐到视口顶部，导致内容被导航栏遮挡。以下是两种无需JavaScript的解决方法：

方法一：使用CSS scroll-margin-top 属性（推荐） #

这是现代浏览器原生支持的方案，无需修改HTML结构，直接给锚点目标元素设置顶部滚动边距，值等于导航栏高度（可适当增加留出间距）。

修改你的CSS，添加以下样式：

/* 给所有锚点目标元素设置滚动边距 */
#features, #pricing, #faqs, #servers, #about {
  scroll-margin-top: 70px; /* 数值匹配导航栏高度+额外间距，你的导航栏py-3大概高度56px，70px更美观 */
}

/* 或者用通用选择器批量处理所有带id的元素 */
/* [id] {
  scroll-margin-top: 70px;
} */

原理：scroll-margin-top 定义了元素滚动到视口时需要保留的顶部外边距，确保目标内容不会被固定导航栏覆盖。

方法二：隐藏占位锚点（兼容旧浏览器） #

如果需要兼容不支持scroll-margin-top的旧浏览器，可以在每个标题前添加隐藏的占位元素作为锚点目标：

第一步：修改HTML结构 #

将原来的锚点id从<p>标签移到新增的占位div上，示例：

<div class="container scrollable" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true" data-bs-offset="150">
  <hr>
  <!-- 新增占位锚点 -->
  <div id="features" class="anchor-placeholder"></div>
  <h2 class="text-center">Features</h2>
  <p>Hello! I am making a quite long...（原内容不变）</p>
  <hr>
  <!-- 其他板块同理 -->
  <div id="pricing" class="anchor-placeholder"></div>
  <h2 class="text-center">Pricing</h2>
  <p>Hello! I am making a quite long...（原内容不变）</p>
  <!-- 剩余板块重复此操作 -->
</div>

第二步：添加CSS样式 #

.anchor-placeholder {
  height: 70px; /* 与导航栏高度+间距一致 */
  visibility: hidden; /* 隐藏占位元素 */
  position: relative;
  top: -70px; /* 向上偏移，确保占位位置不影响页面布局 */
}

原理：锚点跳转到隐藏的占位元素，由于占位元素高度等于导航栏高度，实际内容会自然显示在导航栏下方，同时占位元素不会破坏页面布局。

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