解决点击页面下方链接打开对话框时页面自动滚动到顶部的问题

嘿，这个问题我太熟啦！你遇到的页面自动滚顶，根源就在<a>标签的href="#"上——浏览器默认会把#当作指向页面顶部的锚点，哪怕你已经绑定了打开对话框的点击事件，它还是会悄悄执行这个默认的滚动行为。

给你几个简单有效的解决办法，选哪个都行：

• 方法一：在点击事件里直接阻止默认行为
  只需要在onclick代码末尾加上return false，就能打断浏览器的默认锚点跳转逻辑：

  <a href="#" onclick="showPopupImage('keys', 'https://placehold.co/560x420'); return false;">keys</a>
  

• 方法二：修改href为无动作占位符
  把href="#"换成href="javascript:void(0)"，这个写法不会触发任何默认的页面跳转行为，简单直接：

  <a href="javascript:void(0)" onclick="showPopupImage('keys', 'https://placehold.co/560x420')">keys</a>
  

• 方法三：在函数内通过事件对象阻止默认行为（更规范）
  这种方式更灵活，适合后续可能扩展功能的场景：
  先更新JavaScript函数，接收事件参数并调用阻止默认行为的方法：

  function showPopupImage(alt, src, e) {
    // 拦截链接的默认跳转动作
    e.preventDefault();
    const popup = document.getElementById('image-popup')
    popup.querySelector('img').src = src
    popup.querySelector('img').alt = alt
    popup.showModal()
  }
  

  然后修改链接的onclick，把浏览器的event对象传进去：

  <a href="#" onclick="showPopupImage('keys', 'https://placehold.co/560x420', event)">keys</a>
  

要是你想直接用修改后的完整可运行代码，这里给你整理好了（用的是方法一的简化版本）：

<!-- 链接部分 -->
<a href="#" onclick="showPopupImage('keys', 'https://placehold.co/560x420'); return false;">keys</a>

<!-- 对话框部分 -->
<dialog id="image-popup" class="xyzzy">
  <form method="dialog">
    <button class="large-button" id="close" aria-label="close" formnovalidate>
      <b>Close</b>
    </button>
  </form>
  <img src="#" alt="" width="560" height="420"/>
</dialog>

<script>
function showPopupImage(alt, src) {
  const popup = document.getElementById('image-popup')
  popup.querySelector('img').src = src
  popup.querySelector('img').alt = alt
  popup.showModal()
}
</script>

内容来源于stack exchange