解决自定义隐藏菜单按钮点击后页面自动返回顶部的问题

Hey William, let’s tackle that annoying issue where clicking your menu button sends the page jumping back to the top. I’ve looked at the core problem here, and it’s almost always tied to default browser behavior or a tiny oversight in your code—here’s how to fix it:

1. The Most Common Culprit: <a> Tag with href="#" #

If your menu button is an <a> tag using href="#", browsers automatically scroll to the page’s top when you click it (since # targets the document root). Here are two simple fixes:

Option A: Update the href Attribute #

Swap out # for javascript:void(0) to disable the default jump behavior entirely:

<a href="javascript:void(0)" class="menu-button">Open Menu</a>

Option B: Block Default Behavior in JavaScript #

If you want to keep the <a> tag structure, add e.preventDefault() to your click event handler to stop the browser’s default action:

const menuBtn = document.querySelector('.menu-button');
const menu = document.querySelector('.your-menu-element');

menuBtn.addEventListener('click', function(e) {
  e.preventDefault(); // This stops the page from scrolling to top
  // Toggle your menu's visibility (adjust opacity and z-index here)
  menu.classList.toggle('visible');
});

Note: Make sure your CSS has a .visible class that sets opacity: 1 and z-index: 10 (or whatever value you need) to show the menu.

2. Check for Accidental Scroll Code #

Double-check your menu’s JavaScript logic—sometimes window.scrollTo(0, 0) or similar scroll commands get added by mistake during testing. If you find any line that forces the page to scroll to top, delete it immediately.

3. Framework-Specific Fixes (If Applicable) #

If you’re using a frontend framework like Vue or React:

• Vue: Use the .prevent modifier on your click event: @click.prevent="toggleMenu"
• React: Add e.preventDefault() inside your click handler function, just like the vanilla JS example above.

Once you implement one of these fixes, your menu should toggle smoothly without yanking the page back to the top. Give it a test, and let me know if you hit any snags!

内容的提问来源于stack exchange，提问作者William Hartanto