本文详解如何使用 jQuery 动态生成分页链接，并将 href 正确设置为 #id 格式，实现点击后平滑滚动至页面内对应 <div id="..."> 元素。重点解决 attr() 中动态拼接锚点时遗漏 # 符号的常见错误。
本文详解如何使用 jquery 动态生成分页链接，并将 `href` 正确设置为 `#id` 格式，实现点击后平滑滚动至页面内对应 `
` 元素。重点解决 `attr()` 中动态拼接锚点时遗漏 `#` 符号的常见错误。
在构建前端分页导航时，常需将数字按钮（如 1、2）映射为页面内锚点跳转——即点击“2”后自动滚动至 <div id="2"> 所在位置。关键在于：<a> 标签的 href 必须是 # 开头的字符串（如 #2），而非纯数字或对象属性引用。
你原先使用的 .attr({href: "javascript:void(0)"}) 是禁用默认跳转的临时方案，而尝试 .attr({href: item}) 失败的根本原因，是 item（例如数值 1 或字符串 "1"）未加 # 前缀，导致浏览器无法识别为页面内锚点。
✅ 正确写法如下：
.attr('href', '#' + 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', value) 更清晰，避免对象解构带来的混淆；
- item 若为数字，JavaScript 会自动转换为字符串；若为字符串（如 "1"），拼接 '#' + item 同样安全。
进一步优化可采用 jQuery 的元素创建语法，提升可读性与可维护性：
getPageList(totalPages, currentPage, paginationSize).forEach(item => {
const $li = $("<li>", {
"class": `page-item ${item ? "current-page" : "dots"} ${item === currentPage ? "active" : ""}`
}).append(
$("<a>", {
href: "#" + item,
"class": "page-link",
text: item || "..."
})
).insertBefore(".next-page");
});该写法优势明显：
- 避免链式调用过长，逻辑一目了然；
- 类名、属性、文本全部在对象中声明，语义集中；
- href 直接绑定 #" + item，确保生成 <a href="#1">1</a> 等合法锚点链接。
⚠️ 注意事项：
- 目标元素必须存在且具有匹配的 id（如 <div id="1">），ID 值需与 item 完全一致（区分大小写、不可含空格）；
- 若需平滑滚动效果，建议补充 CSS：html { scroll-behavior: smooth; }；
- 为增强可访问性与用户体验，可添加 event.preventDefault() + $('html, body').animate() 实现自定义滚动，但原生 #id 跳转已满足基础需求。
总结：动态设置锚点链接的核心是 href 值必须为 # 加目标 ID 字符串；摒弃 javascript:void(0) 占位，改用语义化、可维护的 jQuery 创建方式，让分页逻辑更健壮、更易扩展。
