点击链接页面刷新或滚动怎么办？用 javascript：void(0) 解决无效跳转

在前端页面开发中，当开发者把 <a> 标签当作纯点击按钮使用时，经常会遇到点击后页面瞬间闪烁刷新、或者视口突然“嗖”地一下滚动回页面最顶部的异常现象。解决这一问题的最直接办法，就是将超链接的地址设为 javascript:void(0)。它通过 JavaScript 伪协议让表达式计算结果返回未定义（undefined），从而既保留超链接的手型光标与可点击外观，又彻底切断浏览器的默认跳转与位置变动行为。

一、为什么点击链接会出现页面刷新或回到顶部？

HTML 中的 <a> 标签（Anchor）在规范设计之初，就是专门为跨文档导航或文档内锚点定位服务的。当一个超链接被用户点击时，浏览器首先会读取其 href 属性的值，并依据标准流程触发默认的导航行为：

• 使用 href=""（空字符串）导致刷新：当 href 属性留空或省略时，浏览器会将其解析为当前文档的相对路径基准。点击该链接等于向当前页面地址重新发起请求，导致整页重新载入、所有未保存的表单数据和组件状态瞬间丢失。
• 使用 href="#" 导致页面滚动置顶：井号（#）在 URI 中代表片段标识符（Fragment Identifier）。当后面没有具体的锚点名称时，浏览器默认将其定位到当前文档的根节点（即 top），视口滚动条因此瞬间跳到坐标 (0, 0)，同时浏览器地址栏末尾还会多出一个 #。

图1：三种常见 href 赋值方式在浏览器中的默认行为机理对比

二、javascript:void(0) 的底层工作原理

为了从根本上理解为什么这段代码能够解决问题，我们需要将 javascript:void(0) 拆解为“伪协议”与“void 运算符”两个核心概念。

1. 什么是 javascript: 伪协议？

通常情况下，URL 的协议前缀是 http:、https: 或 mailto:。但在浏览器标准中，支持一种特殊的 javascript: 伪协议。当 URL 以 javascript: 开头时，浏览器不会尝试建立网络连接去下载资源，而是把冒号后面的字符串交由当前页面的 JavaScript 引擎进行解析与求值。

关键的规则在于：如果表达式求值的结果不是 undefined，浏览器会把返回结果强制转换成字符串，并用这个字符串直接替换掉当前整个网页的内容。例如点击 <a href="javascript:'Hello'">测试</a>，当前页面会被纯文字“Hello”覆盖；只有当表达式计算结果是严格的 undefined 时，浏览器才认为本次导航“无需更新视图”，从而留在当前页面。

2. 为什么是 void(0)？

在 JavaScript 语法中，void 是一个一元运算符。它的标准语义是：计算其后的表达式，并始终返回 undefined。例如：

void 0;           // 返回 undefined
void (1 + 1);     // 计算了 1+1，但依然返回 undefined
void "anything";  // 同样返回 undefined

传入 0 只是惯用的最简写法，它能保证表达式以最小的运行开销完成计算并返回 undefined。因此，当浏览器解析 href="javascript:void(0)" 时，伪协议执行 void(0) 得到 undefined，导航器判定无需任何页面重绘与位置移动，原有的视口高度与滚动条位置得以完整保留。

图2：javascript: 伪协议求值与浏览器导航拦截判定机制

三、排查与修复无效跳转的操作步骤

当页面中已经出现了点击链接导致抖动或跳顶的问题时，可以按照以下标准步骤进行排查与修复：

步骤 1：排查模板中存在问题的链接

使用浏览器的开发者工具（按 F12 或快捷键 Ctrl+Shift+I / Cmd+Option+I）检查出现异常的按钮。排查其 HTML 标签是否包含以下两种典型写法：

<!-- 典型问题 1：使用井号占位，导致滚动到顶部 -->
<a href="#" onclick="showModal()">打开弹窗</a>

<!-- 典型问题 2：空字符串或缺少协议，导致页面整页刷新 -->
<a href="" onclick="deleteItem(102)">删除数据</a>

步骤 2：替换为标准的 javascript:void(0)

将上述链接中的 href 属性值显式改为 javascript:void(0);，保留原有的 onclick 处理逻辑：

<!-- 改造后：点击时绝不会引起页面滚动或刷新 -->
<a href="javascript:void(0);" onclick="showModal()">打开弹窗</a>
<a href="javascript:void(0);" onclick="deleteItem(102)">删除数据</a>

步骤 3：在事件函数中补充兜底逻辑（若有异步操作）

如果需要在点击事件中执行复杂的异步请求或向外层冒泡，可以在绑定的事件处理函数中加入 event.preventDefault()，确保即使在极低版本的移动端浏览器或特殊 Webview 环境中，也完全不触发后续的默认动作：

function deleteItem(id, event) {
  if (event) {
    event.preventDefault(); // 阻止浏览器默认动作
    event.stopPropagation(); // 阻止事件向上冒泡
  }
  // 执行具体的业务逻辑，如弹出确认框或发起 Ajax 请求
  console.log("执行删除操作，ID:", id);
}

步骤 4：真机与长页面验证

验证时切勿只在内容很短的页面测试。请务必将页面滚动条拖拽至中间或底部位置，连续点击该链接，确认以下三个指标：

1. 滚动条位置：视口是否牢牢固定在当前位置，完全没有向上跳动；
2. 地址栏状态：浏览器地址栏最后是否依然保持干净，没有被强行附加 #；
3. 网络与渲染：Network 面板中没有发起针对当前页面 HTML 的重复请求。

图3：排查并修复链接无效跳转的标准操作步骤与验证方法

四、现代前端开发中的进阶选择与标准替代方案

虽然 javascript:void(0) 能够完全解决跳转和滚动问题，但在现代 Web 标准体系中，过度依赖 <a href="javascript:void(0)"> 也会带来一些潜在的规范性问题。了解不同方案的优劣，能帮助我们在不同场景下做出最合理的技术选型：

1. 方案对比与适用场景

2. 语义化优先：为什么应该优先考虑 <button>？

从 Web 无障碍（a11y）和语义化的角度来看：链接（Link）的职责是带用户去往另一个地方，而按钮（Button）的职责是触发当前页面的某个动作。如果一个元素点击后只是呼出下拉菜单、打开抽屉面板或删除某项数据，它本质上是一个按钮而不是链接。将原生 <button> 配合简单的 CSS reset 使用，是无障碍支持最完美的方案：

/* 将按钮样式重置为类似普通文本链接的外观 */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: #52677D;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}

图4：前端交互元素选用与跳转控制最佳实践决策树

五、生产环境开发常见注意事项

总结来说，当遇到点击链接导致页面刷新或滚动回顶部时，采用 javascript:void(0) 是立竿见影且兼容性极高的救急良药；而在进行规范的新项目架构设计时，明确区分“链接”与“按钮”的语义边界，优先选用 <button type="button"> 或 event.preventDefault()，则能让网页的代码质量、无障碍体验与长期可维护性迈上更高的台阶。