点击链接跳转页面后显示隐藏锚点div并滚动到对应位置的实现方案咨询

无需为每个跳转链接单独绑定专属触发函数，通过读取URL Hash做统一匹配即可，后续新增跳转场景也不需要额外写业务逻辑，扩展性更强。

实现步骤 #

1. 结构化菜单标识（仅需配置一次） #

给第二页的每个菜单标题和对应内容块增加唯一标识：

• 给每个菜单内容块设置id，值和跳转链接的Hash值保持一致，比如你需要跳转的第4个菜单内容块id设为extrainformation
• 给每个菜单标题增加自定义属性data-target，值和对应内容块的id保持一致
• 激活态菜单标题、可见内容块统一用active类名控制样式

2. 第一页跳转逻辑无需调整 #

你现有跳转代码可以直接复用，不需要做修改：

<div class="linktosecondpage" onclick="window.open('http://localhost/mypage/secondpage#extrainformation','_self');"></div>

如果是普通文本跳转，直接用a标签写法更简洁：

<a href="http://localhost/mypage/secondpage#extrainformation">跳转到第四项菜单</a>

3. 第二页统一匹配逻辑（仅需编写一次） #

在第二页引入以下JS代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 提取URL中的Hash值，去掉开头的#
  const targetId = window.location.hash.slice(1);
  // 没有Hash时走默认逻辑，展示第一个菜单
  if (!targetId) return;

  // 替换成你实际使用的菜单标题、内容块类名
  const MENU_TITLE_CLASS = '.menu-title';
  const MENU_CONTENT_CLASS = '.menu-content';

  // 重置所有菜单状态：隐藏全部内容，取消所有标题激活态
  document.querySelectorAll(MENU_CONTENT_CLASS).forEach(el => el.classList.remove('active'));
  document.querySelectorAll(MENU_TITLE_CLASS).forEach(el => el.classList.remove('active'));

  // 匹配目标内容和对应菜单标题
  const targetContent = document.getElementById(targetId);
  const targetTitle = document.querySelector(`${MENU_TITLE_CLASS}[data-target="${targetId}"]`);

  if (targetContent && targetTitle) {
    // 激活目标菜单和内容
    targetTitle.classList.add('active');
    targetContent.classList.add('active');
    // 滚动到目标位置，100ms延时避免页面未渲染完成导致滚动偏移
    setTimeout(() => {
      targetContent.scrollIntoView({ behavior: 'smooth' });
      // 不需要平滑滚动的话换成这行：targetContent.scrollIntoView()
    }, 100);
  }
});

适配已有封装逻辑的优化方案 #

如果你已经封装了现成的菜单切换函数比如switchMenu(menuIndex)，可以省去类名操作的逻辑，直接给每个菜单标题增加data-index属性标注菜单序号，读取到Hash后拿到对应序号调用切换函数即可。

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