点击带Hash的页面内链接多次后页面卡顿问题求助

问题原因 #

• 连续点击同个锚点链接时，浏览器会把每次的滚动请求加入执行队列，哪怕目标位置一致，也会逐个执行这些滚动操作，导致页面卡顿，卡顿次数和点击次数完全对应。
• 再加上你用JS切换目标区块的display属性，当区块处于隐藏状态时，浏览器计算锚点位置会出现异常，进一步加重了滚动请求队列的堆积问题。

解决办法 #

1. 阻止默认跳转，手动控制逻辑

给所有锚点链接绑定点击事件，直接阻止浏览器默认的锚点跳转行为，自己处理区块显示/隐藏和滚动逻辑，从根源上避免重复滚动请求堆积。

示例代码：

<a href="#div" class="anchor-link">链接1</a>
<a href="#div" class="anchor-link">链接2</a>
<a href="#div" class="anchor-link">链接3</a>
<a href="#div" class="anchor-link">链接4</a>
<a href="#div" class="anchor-link">链接5</a>

<div id="div" style="display: none;">目标区块内容</div>

<script>
const links = document.querySelectorAll('.anchor-link');
const targetDiv = document.getElementById('div');

links.forEach(link => {
  link.addEventListener('click', (e) => {
    // 阻止浏览器默认锚点跳转
    e.preventDefault();
    
    // 切换目标区块的显示状态
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
    
    // 根据显示状态处理滚动
    if (targetDiv.style.display === 'block') {
      targetDiv.scrollIntoView({
        behavior: 'smooth', // 可选，开启平滑滚动
        block: 'start'
      });
    } else {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
  });
});
</script>

2. 防抖限制，避免重复触发

如果不想完全禁用默认行为，可以给点击事件加防抖函数，限定短时间内只执行一次操作，过滤掉重复的点击请求。

示例代码：

// 防抖函数：指定时间内只执行最后一次触发的函数
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

const targetDiv = document.getElementById('div');
// 封装滚动与显示逻辑
const handleAnchorAction = debounce(() => {
  targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
  if (targetDiv.style.display === 'block') {
    targetDiv.scrollIntoView({behavior: 'smooth'});
  } else {
    window.scrollTo({top: 0, behavior: 'smooth'});
  }
}, 300); // 300毫秒内只响应一次点击

// 给所有锚点链接绑定事件
document.querySelectorAll('a[href="#div"]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    handleAnchorAction();
  });
});

3. 添加占位锚点，优化位置计算

给目标区块加一个隐藏的占位元素，让锚点始终指向这个占位元素，避免区块隐藏时浏览器计算锚点位置出错。

示例代码：

<a href="#div-anchor">链接1</a>
<a href="#div-anchor">链接2</a>
<a href="#div-anchor">链接3</a>
<a href="#div-anchor">链接4</a>
<a href="#div-anchor">链接5</a>

<!-- 隐藏的占位锚点，用于浏览器计算滚动位置 -->
<div id="div-anchor" style="height: 0; overflow: hidden;"></div>
<div id="div" style="display: none;">目标区块内容</div>

<script>
document.querySelectorAll('a[href="#div-anchor"]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetDiv = document.getElementById('div');
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
    // 滚动到占位锚点位置
    document.getElementById('div-anchor').scrollIntoView({behavior: 'smooth'});
  });
});
</script>

内容的提问来源于stack exchange，提问作者Óscar Rabadán