如何用HTML/jQuery实现子菜单跳转至页面指定区块并自动关闭

1. 修复锚点跳转位置不准的问题 #

如果页面存在固定顶部的导航栏，浏览器默认锚点跳转是将目标元素与页面顶部对齐，会导致内容被导航栏遮挡。可以通过CSS全局设置滚动内边距来解决：

/* 假设导航栏高度为80px，根据实际高度调整数值 */
html {
  scroll-padding-top: 80px;
}

该属性会让锚点跳转时自动预留导航栏高度，确保目标section内容显示在可视区域内。

2. 实现跳转后自动关闭子菜单+避免回顶问题 #

纯HTML的a标签跳转无法处理关闭子菜单的逻辑，需要结合JavaScript阻止默认行为，手动控制滚动和菜单状态：

示例代码结构 #

<!-- 导航菜单示例 -->
<nav class="main-nav">
  <button class="menu-btn">展开菜单</button>
  <ul class="sub-menu">
    <li><a href="#sec-1" class="sub-link">子菜单1</a></li>
    <li><a href="#sec-2" class="sub-link">子菜单2</a></li>
    <li><a href="#sec-3" class="sub-link">子菜单3</a></li>
  </ul>
</nav>

<!-- 页面对应区块 -->
<section id="sec-1">区块1内容</section>
<section id="sec-2">区块2内容</section>
<section id="sec-3">区块3内容</section>

JavaScript处理逻辑 #

// 获取所有子菜单链接和子菜单容器
const subLinks = document.querySelectorAll('.sub-link');
const subMenu = document.querySelector('.sub-menu');

subLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止a标签默认跳转行为，避免回顶
    e.preventDefault();
    // 获取目标区块ID
    const targetId = link.getAttribute('href');
    const targetSection = document.querySelector(targetId);
    
    if (targetSection) {
      // 手动滚动到目标位置，配合scroll-padding-top保证位置准确
      targetSection.scrollIntoView({
        behavior: 'smooth', // 可选：开启平滑滚动，不需要则删除该行
        block: 'start'
      });
    }
    
    // 关闭子菜单（根据你现有菜单的显隐逻辑修改，这里以添加隐藏类为例）
    subMenu.classList.add('hidden');
    // 如果菜单按钮有状态类，同步修改（比如汉堡按钮的active状态）
    // document.querySelector('.menu-btn').classList.remove('active');
  });
});

补充说明 #

• 关闭子菜单的逻辑要和你现有菜单的切换逻辑匹配：如果是用display: none控制显隐，就设置subMenu.style.display = 'none'；如果是用类控制，就添加/移除对应类。
• 若不需要平滑滚动，删除behavior: 'smooth'即可，默认是瞬间跳转。

3. 额外注意事项 #

• 确保section的ID与a标签href完全一致（注意大小写）。
• 如果是移动端汉堡菜单，点击链接后记得同步关闭遮罩层，避免遮罩层影响页面操作。

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