如何使用jQuery遍历锚点并滚动到偏移指定值的页面位置

你的参考实现核心逻辑完全可行，不需要修改现有锚点的位置，也不需要提前遍历所有锚点做预处理，只需要拦截图像热区的默认点击跳转行为，替换为自定义的带偏移量的平滑滚动逻辑即可，具体实现如下：

完整实现代码 #

jQuery(function($) {
  // 绑定对应图像映射下所有热区的点击事件
  $('map[name="imgMap"] area').on('click', function(e) {
    // 阻止原生锚点跳转的默认滚动行为
    e.preventDefault();
    // 从热区href属性中提取锚点ID，移除开头的#号
    const targetAnchorId = $(this).attr('href').slice(1);
    scrollToAnchor(targetAnchorId);
  })
})

/**
 * 滚动到指定锚点，带向上偏移量
 * @param {string} id 锚点的name属性值
 */
function scrollToAnchor(id) {
  const $targetAnchor = $(`a[name="${id}"]`);
  // 锚点不存在时直接返回，避免JS报错
  if (!$targetAnchor.length) return;

  $('html, body').animate({
    // 减去的150为向上偏移的像素值，可根据页面固定头部高度、视觉需求自行调整
    scrollTop: $targetAnchor.offset().top - 150
  }, 'fast');
}

实现说明 #

• 不需要提前遍历表格内所有锚点，点击触发时实时获取锚点的位置计算滚动值即可，就算表格内容动态渲染、位置变化，也能拿到准确的坐标。
• 偏移量数值可按需调整：如果页面有固定在顶部的导航栏，直接把偏移值设为「导航栏高度 + 20~30px的留白」即可，避免锚点对应内容被固定导航遮挡。
• 代码做了空值判断，就算热区的href匹配不到对应锚点，也不会抛出JS错误影响页面其他功能运行。

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