jQuery 实现页面内锚点跳转：动态设置 href 属性指向对应 ID 元素

本文详解如何使用 jQuery 动态为分页链接设置 href 属性，使其正确指向页面中同名 ID 的目标元素（如点击“1”跳转至 <p id=”1″>），避免无效 # 或 javascript:void(0) 占位，确保平滑锚点导航功能可用。

本文详解如何使用 jquery 动态为分页链接设置 `href` 属性，使其正确指向页面中同名 id 的目标元素（如点击“1”跳转至 `

`），避免无效 `#` 或 `javascript:void(0)` 占位，确保平滑锚点导航功能可用。

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

你当前使用的 .attr({href: “javascript:void(0)”}) 仅阻止默认跳转，但未建立真实锚点关联。关键修正在于：将 item（即页码数值）拼接到 # 后作为 href 值：

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

注意：.attr({href: item}) 失败是因为它生成的是 href=”1″（无 #），浏览器将其视为相对路径而非页面内锚点；而 item.this 或 this.item 语法错误——item 是函数参数（基本类型数字/字符串），不具有 this 上下文。

✅ 推荐写法（简洁清晰，语义明确）：

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

? 重要注意事项：

• 目标元素必须存在且 id 值严格匹配（区分大小写、不可含空格或特殊字符）；
• 若需平滑滚动效果，建议添加 CSS：html { scroll-behavior: smooth; }；
• 对于 item 为 null/undefined 的 … 项，应保留 href=”#” 或 href=”javascript:void(0)” 并禁用跳转逻辑，避免意外锚点行为；
• 生产环境建议校验 item 类型（如 typeof item === ‘number’ && !isNaN(item)），防止非法 id 导致跳转失败。

通过正确设置 href=”#{item}”，即可实现语义化、无障碍友好的页面内导航，无需额外 JS 滚动控制，兼容所有现代浏览器。