单击汉堡菜单将我带到页面顶部答案

【问题标题】：Clicking off hamburger menu takes me to the top of the page单击汉堡菜单将我带到页面顶部
【发布时间】：2021-11-14 23:39:17
【问题描述】：

我对 javascript 很陌生，我已经尝试过制作一个带有点击事件的小菜单，您可以在此处找到。 https://codepen.io/Laurie312/pen/YzxJJbx

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

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

如果这似乎是一个愚蠢的问题，我深表歉意。我只是不确定从哪里开始。

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案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;
}

【讨论】：