实现点击锚点链接滚动至指定区域并激活对应Tab/手风琴

核心思路 #

先激活目标Tab（包括移动端手风琴的展开状态），再平滑滚动到Tab区域，同时处理URL哈希的可选更新，避开默认锚点的局限性。

1. 调整HTML结构 #

给顶部锚点添加自定义属性标记目标Tab，Tab区域保留唯一ID用于滚动定位：

<!-- 顶部锚点链接 -->
<a href="#" class="tab-jump-link" data-target-tab="2">跳转到第二个Tab</a>

<!-- Tab/手风琴组件容器 -->
<div id="tab-container" class="tab-wrapper">
  <!-- Tab导航栏 -->
  <div class="tab-nav">
    <button data-actab-id="1" class="active">Tab 1</button>
    <button data-actab-id="2">Tab 2</button>
    <button data-actab-id="3">Tab 3</button>
  </div>
  <!-- Tab内容区 -->
  <div class="tab-content">
    <div data-actab-id="1" class="active">Tab 1 内容</div>
    <div data-actab-id="2">Tab 2 内容</div>
    <div data-actab-id="3">Tab 3 内容</div>
  </div>
</div>

2. 整合滚动与Tab激活逻辑 #

基于你已有的Tab切换核心函数，添加锚点事件处理：

// 适配桌面Tab+移动端手风琴的激活核心函数
function activateTargetTab(tabId) {
  // 移除所有元素的激活状态
  document.querySelectorAll('[data-actab-id]').forEach(el => {
    el.classList.remove('active');
    // 移动端手风琴模式下重置内容高度
    if (window.innerWidth < 768) {
      el.style.maxHeight = '0';
    }
  });

  // 激活目标Tab及对应内容
  const targetElements = document.querySelectorAll(`[data-actab-id="${tabId}"]`);
  targetElements.forEach(el => {
    el.classList.add('active');
    // 移动端手风琴模式下展开内容
    if (window.innerWidth < 768) {
      el.style.maxHeight = el.scrollHeight + 'px';
    }
  });
}

// 锚点点击事件绑定
document.querySelectorAll('.tab-jump-link').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认哈希跳转行为
    const targetTabId = this.getAttribute('data-target-tab');
    const tabContainer = document.getElementById('tab-container');

    // 第一步：先激活目标Tab
    activateTargetTab(targetTabId);

    // 第二步：平滑滚动到Tab区域
    tabContainer.scrollIntoView({
      behavior: 'smooth', // 可选：开启平滑滚动
      block: 'start' // 滚动到区域顶部
    });

    // 可选：更新URL哈希，支持直接访问链接激活Tab
    history.pushState(null, null, `#tab-${targetTabId}`);
  });
});

// 可选：页面加载时处理URL哈希，支持直接访问带哈希的链接
window.addEventListener('load', () => {
  const hash = window.location.hash;
  if (hash.startsWith('#tab-')) {
    const tabId = hash.split('-')[1];
    activateTargetTab(tabId);
    document.getElementById('tab-container').scrollIntoView({ block: 'start' });
  }
});

3. 关键细节说明 #

• 先激活再滚动：确保用户滚动到Tab区域时，目标Tab已经处于激活/展开状态，避免出现滚动后才切换的延迟感
• 阻止默认锚点行为：避免浏览器自带的哈希滚动干扰自定义逻辑，解决目标Tab未激活时默认锚点无效的问题
• 适配移动端手风琴：在激活函数中加入屏幕宽度判断，同步处理手风琴内容的展开/收起
• URL哈希更新：可选功能，让用户可以复制当前状态的链接，直接打开就能看到激活的目标Tab

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