我之前也碰到过一模一样的问题！本质原因是页面切换刷新后，浏览器会自动把所有可滚动容器的滚动位置重置到顶部，哪怕你的激活项在侧边栏下方，也会被滚上去看不到。试试下面这几种解决方案，亲测有效：

方案1：用scrollIntoView快速实现（推荐） #

这是最简洁的方法，直接让激活的菜单项自己滚动到侧边栏的可视区域里。只要页面DOM加载完成后，找到带active类的元素，调用它的scrollIntoView方法就行：

// 等DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 定位到激活的菜单项
  const activeMenuItem = document.querySelector('.sidebar .active');
  
  if (activeMenuItem) {
    // 让激活项滚动到侧边栏可视区域，可配置滚动行为和对齐方式
    activeMenuItem.scrollIntoView({
      behavior: 'smooth', // 可选，开启平滑滚动
      block: 'start'      // 对齐到侧边栏顶部，换成'center'可以让它居中显示
    });
  }
});

这个方法会自动识别侧边栏这个滚动容器，不需要手动计算位置，非常省心。

方案2：手动计算滚动位置（兼容旧场景） #

如果你的项目需要兼容不支持scrollIntoView参数的旧浏览器，或者需要更精细的控制，可以手动计算激活项的位置，然后设置侧边栏的scrollTop：

document.addEventListener('DOMContentLoaded', function() {
  const sidebarContainer = document.getElementById('sidebar');
  const activeMenuItem = sidebarContainer.querySelector('.active');
  
  if (sidebarContainer && activeMenuItem) {
    // 计算激活项相对于侧边栏顶部的偏移量
    const itemOffset = activeMenuItem.offsetTop;
    // 滚动到对应位置，这里减去侧边栏高度的一半，让激活项居中显示
    sidebarContainer.scrollTop = itemOffset - (sidebarContainer.offsetHeight / 2);
  }
});

几个关键注意点 #

• 一定要等DOM加载完成再执行代码：用DOMContentLoaded或者框架的生命周期钩子（比如React的useEffect、Vue的mounted），不然会找不到元素。
• 确认active类正确绑定：如果你的激活项没正确加上active类，代码自然找不到目标元素，先检查这一步！
• 动态渲染的侧边栏：如果侧边栏是用前端框架动态生成的，要在组件渲染完成后再执行滚动逻辑，比如React里把代码放在空依赖的useEffect里，Vue放在mounted或者nextTick里。

举个Vue的例子参考：

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      const activeItem = document.querySelector('.sidebar .active');
      if (activeItem) {
        activeItem.scrollIntoView({ behavior: 'smooth' });
      }
    });
  }
}
</script>

这样调整后，页面加载完成时侧边栏就会自动滚动到激活的菜单项位置，小屏幕下也能正常看到当前选中的选项啦～

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