Bootstrap v4 Scrollspy问题：点击导航跳转时文本位置异动的解决问询

我之前也碰到过一模一样的问题！其实核心原因很简单：那个示例里的导航栏是固定在顶部的，当你点击导航链接跳转到对应章节时，浏览器默认会把目标元素的顶部对齐视口顶部，但固定导航栏会占据顶部的空间，直接就把章节的标题部分盖住了，看起来就像是文本“移位”了——而滚动的时候是实时计算位置，所以不会有这个问题。

下面给你两个靠谱的解决办法，选哪个都能搞定：

方法一：用CSS调整目标章节的内边距与外边距 #

给每个带锚点的章节元素添加样式，用顶部内边距预留出导航栏的空间，再用负的外边距抵消掉内边距带来的布局空白，这样既不会挡住内容，也不会破坏页面布局：

/* 假设导航栏高度是70px，根据实际情况调整数值 */
.scrollspy-section {
  padding-top: 70px;
  margin-top: -70px;
}

记得给每个章节（比如<div id="section1">这类元素）加上scrollspy-section这个类就行。

方法二：给Scrollspy设置偏移量（更推荐） #

直接在初始化Scrollspy的时候配置offset参数，让它计算滚动位置时自动跳过导航栏的高度，这样点击跳转和滚动高亮都会准确对应：

$('body').scrollspy({
  target: "#your-navbar-id", // 替换成你导航栏的实际id
  offset: 70 // 数值等于导航栏的高度
});

这个方法更贴合Bootstrap的原生逻辑，不需要额外修改太多CSS，维护起来也更方便。

最后再提个小细节：检查一下你的HTML结构，确保导航链接的href属性值和目标章节的id完全一致（比如<a href="#section1">对应<div id="section1">），这个小疏忽有时候也会导致奇怪的定位问题。

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