Bootstrap 4导航栏首个项未高亮及Scrollspy功能异常问题

我来帮你搞定这两个困扰你的问题，结合Bootstrap 4 Scrollspy的特性和平滑滚动的实现逻辑，给你具体的修复方案：

问题1：页面加载时首个导航项未激活 #

这是Scrollspy的典型小坑——页面刚加载时，Scrollspy默认不会主动检测初始滚动位置（哪怕你在页面最顶部）。你可以用下面两种方法快速修复：

方法1：初始化后手动触发Scrollspy更新 #

在你的jQuery代码里，初始化Scrollspy之后，强制触发一次滚动事件，让Scrollspy识别当前位置：

// 先初始化Scrollspy
$('body').scrollspy({ target: '#navbar' });
// 触发滚动事件，激活对应导航项
$(window).trigger('scroll');

方法2：确保页面加载时回到顶部 #

有时候页面加载时可能因为缓存停留在之前的滚动位置，加上这行代码保证初始位置正确：

$(document).ready(function() {
  // 页面加载时滚动到顶部
  $('html, body').scrollTop(0);
  
  // 你的平滑滚动代码
  $('a.nav-link').click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(target).offset().top
    }, 800);
  });

  // 初始化并刷新Scrollspy
  $('body').scrollspy({ target: '#navbar' });
  $(window).trigger('scroll');
});

问题2：平滑滚动后Scrollspy激活状态不同步 #

当用jQuery自定义平滑滚动时，Scrollspy会因为滚动动画的延迟，无法实时同步激活状态。你可以在平滑滚动动画完成后，手动触发Scrollspy更新：

$('a.nav-link').click(function(e) {
  e.preventDefault();
  var target = $(this).attr('href');
  $('html, body').animate({
    scrollTop: $(target).offset().top
  }, 800, function() {
    // 动画结束后触发滚动事件，让Scrollspy更新激活状态
    $(window).trigger('scroll');
  });
});

额外要注意的细节 #

• 确认导航栏的id和Scrollspy初始化时的target一致，比如你用target: '#navbar'，那导航栏必须有<nav id="navbar">
• 每个导航链接的href要严格对应页面区块的id，比如<a href="#about" class="nav-link">必须对应<section id="about">，大小写也要一致哦
• 确保页面的每个区块有足够的高度，不然Scrollspy可能检测不到滚动切换

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