如何在页面加载时定位垂直HTML菜单对应项

纯HTML/CSS没法实现这个需求——页面跳转后是全新的加载状态，CSS没有跨页面保存菜单滚动位置的能力，锚点方案也因为你已经用href指向页面地址，没法直接同时锚定到菜单项（除非配合JS处理）。核心得靠JavaScript来解决，下面是具体方案：

1. 给菜单项添加标识 #

修改菜单HTML，给每个<a>标签加个data-page属性，对应页面的文件名（不带.html），方便后续匹配定位：

<div class="nav-scroll-menu">
  <a href="page1.html" class="nav-menu-item" data-page="page1">Page 1</a>
  <a href="page2.html" class="nav-menu-item" data-page="page2">Page 2</a>
  <a href="page3.html" class="nav-menu-item" data-page="page3">Page 3</a>
  <!-- 剩余27个菜单项同理添加data-page属性 -->
</div>

2. 页面加载时自动定位 #

写一段通用JavaScript（可以放到公共的menu.js文件中，所有页面引入该文件即可）：

document.addEventListener('DOMContentLoaded', function() {
  // 提取当前页面的文件名，比如从page20.html中得到page20
  const currentPageName = window.location.pathname.split('/').pop().replace('.html', '');
  
  // 找到对应页面的菜单项
  const activeMenuItem = document.querySelector(`.nav-menu-item[data-page="${currentPageName}"]`);
  
  if (activeMenuItem) {
    // 让菜单项滚动到菜单容器的可视区域，这里设置为居中显示，也可改为start或end
    activeMenuItem.scrollIntoView({ behavior: 'auto', block: 'center' });
    // 给当前菜单项添加高亮样式，方便用户识别
    activeMenuItem.classList.add('active');
  }
});

备选：无需修改HTML的匹配方式 #

如果不想改动现有HTML，也可以直接通过菜单项的href属性匹配当前页面：

document.addEventListener('DOMContentLoaded', function() {
  const currentPagePath = window.location.pathname.split('/').pop();
  const activeMenuItem = Array.from(document.querySelectorAll('.nav-menu-item')).find(item => {
    return item.href.split('/').pop() === currentPagePath;
  });
  
  if (activeMenuItem) {
    activeMenuItem.scrollIntoView({ block: 'center' });
    activeMenuItem.classList.add('active');
  }
});

3. 可选优化 #

• 想要平滑滚动效果，把scrollIntoView中的behavior参数改为'smooth'即可。
• 给.active类添加CSS样式，让当前菜单项更突出：

.nav-menu-item.active {
  color: #007bff;
  background-color: rgba(0,123,255,0.1);
}

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