同页面锚点跳转触发JS函数并高亮目标的实现方案

最近做项目时遇到一个需求：点击锚点链接时，页面的目标位置要高亮显示。折腾了好几个方案，终于搞定了，分享下我的踩坑过程和最终解法：

问题场景 #

• 跨页跳转锚点时，我用$(document).ready()调用高亮函数，完全没问题——页面加载完成后找到目标元素加高亮就行。
• 但同页面内跳转时，这个函数根本不触发！因为页面没刷新，ready事件只在初始加载时执行一次，同页跳转不会重新触发它。

踩过的坑：栈溢出的噩梦 #

一开始想偷懒，给每个锚点加onclick="highlightTarget()"，结果直接报栈溢出错误！查了半天才发现，我写的highlightTarget()函数里不小心递归调用了自己——比如函数里操作DOM时又意外触发了点击事件？总之这个方案不仅麻烦（要逐个加onclick），还直接炸了。

最终解决方案：批量绑定点击事件 #

后来想到用事件监听结合类选择器，一次性处理所有锚点，完美解决了问题！具体代码如下：

// 给所有带.anchor-link类的锚点绑定点击事件
document.querySelectorAll('.anchor-link').forEach(anchor => {
  anchor.addEventListener('click', function() {
    // 延迟100ms执行，确保页面已经滚动到目标位置
    setTimeout(() => {
      // 提取锚点对应的目标ID（去掉#）
      const targetId = this.getAttribute('href').slice(1);
      const targetElement = document.getElementById(targetId);
      
      if (targetElement) {
        // 添加高亮样式类
        targetElement.classList.add('highlight');
        // 2秒后移除高亮，恢复正常
        setTimeout(() => {
          targetElement.classList.remove('highlight');
        }, 2000);
      }
    }, 100);
  });
});

为什么这个方案有效？ #

• 批量处理：用类选择器一次性选中所有锚点，不用逐个写onclick，后期维护改类名就行，非常方便。
• 覆盖所有场景：同页跳转时触发点击事件，跨页跳转时$(document).ready()的逻辑依然生效，两种场景都覆盖到了。
• 避免递归：事件绑定逻辑清晰，不会触发递归调用，彻底解决了栈溢出问题。
• 延迟执行：加了100ms延迟是因为页面滚动到目标位置需要一点时间，确保能准确找到并操作目标元素。

另外别忘了给高亮类加CSS样式，比如：

.highlight {
  background-color: #ffffcc;
  animation: fadeOut 2s ease-out forwards;
}

@keyframes fadeOut {
  from { background-color: #ffffcc; }
  to { background-color: transparent; }
}

这样点击锚点后，目标元素会有一个淡入淡出的高亮效果，体验更好～

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