页面重载后如何让侧边栏菜单选中项保持在顶部（原生JS）

你已经实现了菜单项的激活状态，但需要让选中项自动滚动到sidebar可视区域顶部，以下是两种原生JS解决方案：

先修正原CSS语法错误 #

原代码中height:100px后缺少分号，会导致overflow-y:scroll不生效，修正后的基础样式：

.sidebar {
    height: 100px;
    overflow-y: scroll;
}
.sidebar ul li {
    padding: 30px;
    cursor: pointer; /* 添加上让菜单项更像可点击元素 */
}
.sidebar ul li.active {
    background-color: #eee; /* 激活样式示例 */
}

方案1：使用scrollIntoView方法（推荐，简洁直观） #

原生API直接让目标元素滚动到容器可视区域顶部，支持平滑滚动：

<div class="sidebar">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item100</li>
  </ul>
</div>

<script>
const sidebar = document.querySelector('.sidebar');
const menuItems = sidebar.querySelectorAll('li');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有激活状态
    menuItems.forEach(i => i.classList.remove('active'));
    // 设置当前项为激活状态
    this.classList.add('active');
    // 滚动到当前项顶部，支持平滑滚动
    this.scrollIntoView({
      behavior: 'smooth', // 可选：去掉则为瞬间滚动
      block: 'start' // 确保元素顶部对齐容器顶部
    });
  });
});
</script>

方案2：手动计算并设置scrollTop值 #

适合需要精细控制滚动逻辑的场景：

<div class="sidebar">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item100</li>
  </ul>
</div>

<script>
const sidebar = document.querySelector('.sidebar');
const menuItems = sidebar.querySelectorAll('li');

menuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 移除所有激活状态
    menuItems.forEach(i => i.classList.remove('active'));
    // 设置当前项为激活状态
    this.classList.add('active');
    
    // 计算目标元素相对于sidebar的顶部偏移量，直接设置滚动距离
    sidebar.scrollTop = this.offsetTop;

    // 若需手动实现平滑滚动，可取消注释以下代码
    // const targetScrollTop = this.offsetTop;
    // const startScrollTop = sidebar.scrollTop;
    // const distance = targetScrollTop - startScrollTop;
    // const duration = 300;
    // let startTime = null;
    
    // function animation(currentTime) {
    //   if (startTime === null) startTime = currentTime;
    //   const timeElapsed = currentTime - startTime;
    //   const progress = Math.min(timeElapsed / duration, 1);
    //   sidebar.scrollTop = startScrollTop + distance * progress;
    //   if (timeElapsed < duration) requestAnimationFrame(animation);
    // }
    // requestAnimationFrame(animation);
  });
});
</script>

动态菜单项适配：事件委托 #

如果菜单项是动态生成的，建议给父元素绑定事件，避免重复绑定：

sidebar.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    menuItems.forEach(i => i.classList.remove('active'));
    e.target.classList.add('active');
    e.target.scrollIntoView({ block: 'start', behavior: 'smooth' });
  }
});

内容的提问来源于stack exchange，提问作者Bipul Chandro Roy