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

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

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

在构建动态分页组件时，常见需求是：点击数字链接（如“1”、“2”）后，页面自动滚动至对应 ID 的区块（例如

）。关键在于——链接的 href 必须是有效的片段标识符（fragment identifier），即以 # 开头的字符串（如 #1、#2），而非纯数字或 javascript:void(0)。

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

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

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

.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");
});

⚠️ 注意事项：

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

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