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

Question

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

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

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

page jumps to top on menu click VBA to click on link with href=javascript:void(0);

如果这个问题看起来很愚蠢，我深表歉意。我只是不确定从哪里开始。

Answer 1

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

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

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

Answer 2

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

DEMO

a tag Used to navigate to pages and resources

button Generally perform some button task, like opening hamburger menu

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

并将样式用作：

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

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

Clicking off hamburger menu takes me to the top of the page

html

javascript

css

hamburger-menu