点击汉堡菜单，我就到了页面的顶部

Question

我对javascript很陌生，我尝试过用点击事件制作一个小菜单，你可以在这里找到。https://codepen.io/Laurie312/pen/YzxJJbx

问题是，当你从汉堡菜单上点击关闭时，你总是会回到页面的顶部。现在我已经看到有一个href="javascript:void(0)"指令可能很有用，但我不确定它是否应该使用html应用，或者是否需要与js并行使用。我也读到它不应该真正使用。我不确定我的情况是否为它提供了一个好的用例

我已经查看了下面链接的stackoverflow上的各种问题，它们似乎都与我面临的问题密切相关，但我想确保我正确理解这个问题。

单击菜单时页面跳转到顶部VBA单击链接，链接为href=javascript:void(0(；

如果这是个愚蠢的问题，我深表歉意。我只是不知道从哪里开始。

Answer 1

除非您阻止默认事件处理，否则浏览器将尝试将用户导航到<a href="#" ...>锚点；没有名字，它在页面的顶部。

您需要防止点击处理程序中的默认事件处理：

toggleButton.addEventListener('click', (evt) => {
evt.preventDefault();
navList.classList.toggle('active')
})

Answer 2

您可以使用button代替a作为：

演示

a标签用于导航到页面和资源

button通常执行一些按钮任务，如打开汉堡菜单

<button id="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>

并将样式用作：

#toggle-button {
...
border: none;
background: transparent;
}