如何使用 jQuery 动态设置锚点链接的 href 属性以实现页面内跳转

本文详解如何在 jQuery 中为动态生成的分页链接正确设置 href 属性，使其指向对应 ID 的页面元素（如 <p id=”1″>），实现平滑页面内跳转，避免 javascript:void(0) 等无效占位写法。

本文详解如何在 jquery 中为动态生成的分页链接正确设置 `href` 属性，使其指向对应 id 的页面元素（如 `

`），实现平滑页面内跳转，避免 `javascript:void(0)` 等无效占位写法。

在构建动态分页组件时，常见需求是：点击数字链接（如“1”、“2”）后，页面自动滚动至对应 ID 的区块（例如 <p id=”1″ class=”page-number”>）。关键在于——链接的 href 必须是有效的片段标识符（fragment identifier），即以 # 开头的字符串（如 #1、#2），而非纯数字或 javascript:void(0)。

你当前使用的 .attr({href: “javascript:void(0)”}) 仅阻止默认跳转，但未建立与目标元素的语义关联；而尝试 .attr({href: item}) 会生成 href=”1″，浏览器将其视为外部路径，无法触发页面内锚点滚动。

✅ 正确做法是：在 item 值前拼接 # 符号：

.attr('href', '#' + item)

完整优化后的分页项生成代码如下（推荐使用对象初始化方式，更清晰、可维护性更强）：

getPageList(totalPages, currentPage, paginationSize).forEach(item => {
  const $li = $("<li>", {
    "class": `page-item ${item ? "current-page" : "dots"} ${item === currentPage ? "active" : ""}`
  }).append(
    $("<a>", {
      href: "#" + item,        // ✅ 核心：生成 #1, #2, #3...
      "class": "page-link",
      text: item || "..."
    })
  ).insertBefore(".next-page");
});

⚠️ 注意事项：

• 目标元素（如 <p id=”1″>）必须存在且 id 值严格匹配 href 中的片段（区分大小写，不可含空格或特殊字符）；
• 若 item 可能为 null/undefined 或非字符串类型，建议显式转换：’#’ + String(item)；
• 为提升用户体验，可配合 scrollIntoView() 或 jQuery 的 animate() 实现平滑滚动（需额外 CSS 或 JS 支持）；
• 避免重复 ID：确保每个分页数字对应的 id 在整个页面中唯一，否则行为不可预测。

总结：页面内跳转的本质是利用浏览器原生锚点机制，jQuery 的职责只是准确生成 href=”#xxx”。只要 # 不遗漏、ID 值一致、DOM 结构就绪，无需额外事件绑定即可开箱即用。