基于Bootstrap的移动端平滑滚动异常问题求助

看起来你遇到的是移动端响应式菜单收起时，平滑滚动位置计算偏差的问题——桌面端navbar高度稳定，但移动端点击菜单链接后，折叠的菜单会收起，navbar高度瞬间变化，导致你提前计算的offset().top -60就不准了，自然会滚过头。

给你几个针对性的修复方案，按优先级来：

方案1：先关闭菜单，再计算滚动位置（最推荐） #

核心思路是：点击菜单链接后，先让响应式菜单收起，等navbar高度稳定后，再计算目标区块的偏移量，这样就不会因为菜单高度变化导致滚动偏差。修改后的代码如下：

// Smooth scrolling
$(document).on('click', 'a[href^="#"]', function (event) {
  // 排除空的锚点（比如href="#"）
  const targetSelector = $.attr(this, 'href');
  if (targetSelector === '#') return;

  event.preventDefault();
  
  // 获取响应式菜单元素
  const $collapseMenu = $('.navbar-collapse');
  
  // 如果菜单是展开状态，先关闭它
  if ($collapseMenu.hasClass('show')) {
    $collapseMenu.collapse('hide');
    
    // 监听菜单关闭完成的事件，再执行滚动
    $collapseMenu.one('hidden.bs.collapse', function() {
      scrollToTarget(targetSelector);
    });
  } else {
    // 菜单本来就是收起的，直接滚动
    scrollToTarget(targetSelector);
  }
});

// 封装滚动逻辑，复用性更好
function scrollToTarget(targetSelector) {
  // 获取当前navbar的实际高度，代替固定的60，适配不同设备
  const navbarHeight = $('.navbar').outerHeight();
  const $target = $(targetSelector);
  
  if ($target.length) {
    $('html, body').animate({
      scrollTop: $target.offset().top - navbarHeight
    }, 1000);
  }
}

方案2：简化版修复（快速调试用） #

如果你不想改太多逻辑，也可以先强制关闭菜单，再延迟一点计算滚动位置（缺点是延迟时间需要根据实际情况调整）：

$(document).on('click', 'a[href^="#"]', function (event) {
  const targetSelector = $.attr(this, 'href');
  if (targetSelector === '#') return;
  
  event.preventDefault();
  
  // 先关闭响应式菜单
  $('.navbar-collapse').collapse('hide');
  
  // 给菜单收起留300ms时间，再计算滚动位置
  setTimeout(() => {
    // 动态获取当前navbar高度，代替固定的60
    const navbarHeight = $('.navbar').outerHeight();
    $('html, body').animate({
      scrollTop: $(targetSelector).offset().top - navbarHeight
    }, 1000);
  }, 300);
});

额外注意事项 #

• 确保你的HTML里，目标区块的id和链接的href完全匹配，比如<a href="#about">对应<section id="about">
• 检查移动端的viewport设置是否正确，应该包含<meta name="viewport" content="width=device-width, initial-scale=1">，否则可能导致视口计算偏差

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