如何防止点击视频暂停/恢复按钮时页面自动跳转到顶部-html教程-PHP中文网

如何防止点击视频暂停/恢复按钮时页面自动跳转到顶部

点击触发 JavaScript 函数时，浏览器默认会跳转至页面顶部；只需将 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 替换为 href="javascript:void(0);" 即可阻止该行为，保持页面滚动位置不变。

点击 `` 触发 javascript 函数时，浏览器默认会跳转至页面顶部；只需将 `href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"` 替换为 `href="javascript:void(0);"` 即可阻止该行为，保持页面滚动位置不变。

在 HTML 中，<a></a> 标签的 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" 并非“无操作”，而是一个指向当前页面片段标识符（即页面顶部锚点）的有效 URL。当用户点击时，浏览器会尝试滚动到该锚点位置——由于 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b 不指向任何具体元素，最终表现为页面瞬间跳回顶部。这是导致你视频控制按钮触发后页面“抖动”或“上跳”的根本原因。

正确解决方案是移除默认导航行为。推荐使用 href="javascript:void(0);"：

javascript:void(0) 是一个合法的 JavaScript 伪协议 URI，执行后返回 undefined，不触发页面跳转；
它语义清晰，兼容性好（支持所有现代及旧版浏览器）；
同时保留了 <a></a> 标签的天然可点击性与 CSS 可样式化特性（如 :hover、cursor: pointer 等）。

✅ 修改后的按钮代码如下：

<td>
  <a href="javascript:void(0);" onclick="pauseVideo()" style="font-size: 35px; text-decoration: none;">Pause Video</a>
</td>
<td>
  <a href="javascript:void(0);" onclick="unpauseVideo()" style="font-size: 35px; text-decoration: none;">Unpause Video</a>
</td>

⚠️ 注意事项：

避免 href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + return false 混用：虽然 onclick="pauseVideo(); return false;" 也能阻止跳转，但 return false 在某些事件模型中可能带来副作用（如阻止事件冒泡），且可读性不如 void(0) 直观；
更现代的替代方案（推荐进阶使用）：若追求最佳实践，建议改用 <button></button> 元素替代 <a></a>，并配合 CSS 设置 cursor: pointer 和去除默认样式：
```
<button type="button" onclick="pauseVideo()" style="font-size: 35px; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none;">
  Pause Video
</button>
```
<button></button> 语义更准确（表示交互控件而非链接），天生无跳转行为，无障碍支持更好，是更健壮的选择；
JavaScript 初始化时机：原代码中 document.getElementById("myVideo") 在 <script></script> 内直接执行，但此时 DOM 尚未加载完成，可能导致 video 为 null。应将脚本移至