jQuery 实现分页链接跳转到对应 ID 的 HTML 元素教程

本文详解如何使用 jQuery 动态生成分页链接，并正确设置 href 属性为 #id 格式，实现点击后平滑滚动至页面内对应 ID 的 <p> 元素。

本文详解如何使用 jquery 动态生成分页链接，并正确设置 `href` 属性为 `#id` 格式，实现点击后平滑滚动至页面内对应 id 的 `

` 元素。

在构建前端分页组件时，常见需求是：点击数字页码（如 1、2），页面自动滚动至对应 ID 的目标区块（例如 <p id=”1″>）。此时，链接的 href 必须是有效的锚点格式——即以 # 开头加目标元素 ID，而非空值或 javascript:void(0)。

你当前使用的 .attr({href: “javascript:void(0)”}) 仅阻止默认跳转，但未建立实际导航关系。关键修正在于：将页码值 item 拼接为 #1、#2 等形式赋给 href：

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

注意：此处必须显式添加 # 符号，否则浏览器无法识别为页面内锚点；直接写 .attr(‘href’, item) 会被解析为相对路径（如 /1），导致页面刷新或 404。

✅ 推荐写法（简洁清晰）：

立即学习“前端免费学习笔记（深入）”；

getPageList(totalPages, currentPage, paginationSize).forEach(item => {
  const $link = $("<a>", {
    href: "#" + item,
    class: "page-link",
    text: item || "..."
  });

  const $li = $("<li>", {
    class: `page-item ${item ? "current-page" : "dots"} ${item === currentPage ? "active" : ""}`
  }).append($link);

  $li.insertBefore(".next-page");
});

该写法利用 jQuery 构造函数的属性对象语法（$(“<tag>”, { attr: value })），比链式调用更易读、更少出错，且天然支持动态拼接属性值。

⚠️ 注意事项：

• 目标元素（如 <p id=”1″>）必须存在且 id 值与页码完全一致（纯数字或字符串需严格匹配）；
• 若需平滑滚动效果，建议补充 CSS：html { scroll-behavior: smooth; }；
• 避免 ID 以数字开头（虽 HTML5 允许，但部分旧版 JS/CSS 可能异常）；更稳妥做法是统一加前缀，如 id=”page-1″，此时 href 应为 #page-1；
• 确保 item 为非空、非 undefined 值，必要时添加校验：item != null && item !== ”。

通过以上方式，即可实现语义清晰、行为可靠、易于维护的锚点分页导航。