I'm quite new to javascript and I have tried my hand at making a little menu with click event which you can find here. https://codepen.io/Laurie312/pen/YzxJJbx

The problem is when you click off from the hamburger menu you always return to the top of the page. Now I have seen that there is a href="javascript:void(0)" instruction which could be useful, but I'm not sure whether that should be applied using html or if you need to use it in parallel with js I've also read that it shouldn't really be used. I'm not sure if my situation provides a good use case for it.

I've had a look at various problems on stackoverflow as linked below and they all seem like they might be closely related to the issue I'm facing, but I wanted to make sure I understood the issue correctly.

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

I apologise if this seems like a silly question. I'm just not sure where to start.

CodePudding user response：

Unless you prevent default event handling, the browser will try and navigate the user to the <a href="#" ...> anchor; without a name, it's the top of the page.

You need to prevent the default event handling in your click handler:

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

CodePudding user response：

You can use button in place of a as:

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>

and use styles as :

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