如何设置jQuery分页链接的href以锚定到对应ID的页面区块

问题描述 #

需动态生成分页页码，点击页码时跳转到页面下方对应ID的div区块（如点击页码1，跳转至id="1"的div）。当前生成分页的代码中，链接href暂用javascript:void(0)填充，尝试attr({href: item})等写法均无效，无法正确指向锚点。

现有分页代码片段：

getPageList(totalPages, currentPage, paginationSize).forEach(item =>{
       $("<li>").addClass("page-item").addClass(item ? "current-page" : "dots")
       .toggleClass("active", item === currentPage).append($("<a>").addClass("page-link")
       .attr({href: "javascript:void(0)"}).text(item || "...")).insertBefore(".next-page")
})

目标效果：普通页码的链接href应为#1、#2等，对应页面中id="1"、id="2"的div；dots项（显示...的链接）保持无效跳转状态。

问题原因 #

1. 锚点格式错误：直接使用item作为href值，得到的是1、2这类纯数字路径，浏览器会将其视为相对URL而非页面内锚点——锚点必须以#开头（如#1）才能指向对应ID的元素。
2. 未区分页码与dots项：dots项对应的item为空值，此时不能设置锚点链接，需要保留原有的无效跳转逻辑。

解决方法 #

修改代码中设置href的部分，通过判断item是否存在，分别设置不同的href值：

• 若item存在（普通页码），设置href为带#前缀的锚点路径#${item}
• 若item不存在（dots项），保持javascript:void(0)

修改后的完整代码片段：

getPageList(totalPages, currentPage, paginationSize).forEach(item =>{
       $("<li>").addClass("page-item").addClass(item ? "current-page" : "dots")
       .toggleClass("active", item === currentPage).append($("<a>").addClass("page-link")
       .attr({href: item ? `#${item}` : "javascript:void(0)"}).text(item || "...")).insertBefore(".next-page")
})

设置完成后，点击普通页码链接时，浏览器会自动跳转到页面中对应ID的div区块；dots项的链接则不会触发跳转。

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