HTML <dialog> 标记模式在打开时滚动到底部

Question

当使用dialogHTML标记并调用.showModal()方法时，似乎当模态内容比对话框显示区域长时，每次打开时对话框都会自动滚动到底部。有没有一种干净的方法可以抑制这种行为，这样对话框内容就会在打开时保持在最上面？

document.getElementById("openDialog").addEventListener("click", () => document.getElementById("modal").showModal());
document.getElementById("closeDialog").addEventListener("click", () => document.getElementById("modal").close());

<button id="openDialog">Open</button>
<dialog id='modal'>
<h1>Hello world 1</h1>
<h1>Hello world 2</h1>
<h1>Hello world 3</h1>
<h1>Hello world 4</h1>
<h1>Hello world 5</h1>
<h1>Hello world 6</h1>
<h1>Hello world 7</h1>
<h1>Hello world 8</h1>
<h1>Hello world 9</h1>
<h1>Hello world 10</h1>
<button id="closeDialog">Close</button>
</dialog>

Answer 1

感谢@Teemu在问题评论中的解释，导致这种行为的原因是button元素专注于负载。

在我的情况下，我将该按钮用作解除按钮，因此用不带href属性的a标记替换button将解决问题。

document.getElementById("openDialog").addEventListener("click", () => document.getElementById("modal").showModal());
document.getElementById("closeDialog").addEventListener("click", () => document.getElementById("modal").close());

<button id="openDialog">Open</button>
<dialog id='modal'>
<h1>Hello world 1</h1>
<h1>Hello world 2</h1>
<h1>Hello world 3</h1>
<h1>Hello world 4</h1>
<h1>Hello world 5</h1>
<h1>Hello world 6</h1>
<h1>Hello world 7</h1>
<h1>Hello world 8</h1>
<h1>Hello world 9</h1>
<h1>Hello world 10</h1>
<a id="closeDialog">Close</button>
</dialog>