页面加载时使用jQuery实现水平导航自动滚动到.active激活链接

方案1：原生JavaScript实现（无第三方依赖） #

直接在页面加载完成后执行以下代码即可，兼容所有现代浏览器：

window.addEventListener('load', function() {
  const slider = document.getElementById('boxSlider');
  const activeItem = slider.querySelector('a.active');
  if (!activeItem) return;
  
  // 用getBoundingClientRect计算更精准，不受父元素定位影响
  const sliderRect = slider.getBoundingClientRect();
  const activeRect = activeItem.getBoundingClientRect();
  const scrollLeft = slider.scrollLeft + activeRect.left - sliderRect.left - (sliderRect.width / 2) + (activeRect.width / 2);

  slider.scrollTo({
    left: scrollLeft,
    behavior: 'smooth' // 改为auto可实现瞬间滚动无动画
  });
});

方案2：jQuery实现（适配你现有调用逻辑） #

先扩展jQuery的scrollCenter方法，再按你之前的逻辑调用即可：

// 扩展jQuery方法
$.fn.scrollCenter = function(activeSelector) {
  return this.each(function() {
    const $slider = $(this);
    const $active = $slider.find(activeSelector);
    if (!$active.length) return;
    
    const scrollLeft = $active.offset().left - $slider.offset().left - ($slider.width() / 2) + ($active.outerWidth() / 2) + $slider.scrollLeft();
    $slider.animate({ scrollLeft: scrollLeft }, 300); // 300为滚动动画时长，单位毫秒可自行调整
  });
};

// 页面加载完成后调用
$(document).ready(function() {
  $("#boxSlider").scrollCenter("a.active");
});

注意事项 #

• 代码默认处理了不存在.active元素的场景，不会抛出异常
• 原生实现的平滑滚动效果兼容所有支持Bootstrap5的浏览器，移动端触摸滚动逻辑不受影响
• 如果不需要滚动动画，原生方案修改behavior参数为auto，jQuery方案将animate方法替换为$slider.scrollLeft(scrollLeft)即可

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