HTML Absolute元素onclick返回页面顶部

Question

我在一个网站上工作，我为网站创建了自己的菜单。 因此，菜单在0不透明度和z-index -1下隐藏。 点击按钮，菜单将显示在屏幕上。

https://williamhrtanto.com/msa/about/这是我正在研究的网站，所以你们可以直接检查它目前的工作方式

当前的问题是，每当我单击按钮以显示菜单时，它将返回页面顶部

我问如何在任何地方单击菜单都会显示，并且不会移回到页面顶部。

我尝试过固定位置和绝对位置

谢谢

Answer 1

1. 去除不透明
2. 设置显示：无，位置：固定
3. 单击后设置显示块

Answer 2

您的页面上有以下JS代码：

<script>
    jQuery(document).ready(function($){
    // now you can use jQuery code here with $ shortcut formatting
    // this will execute after the document is fully loaded
    // anything that interacts with your html should go here

    var buttonMenu = $('#menuButtonContainer');
    var menuScreen = $('#menue');

    buttonMenu.click(function(){
        //alert('clicked');
        if(menuScreen.css('opacity')=='0'){
            menuScreen.css('opacity', '1');
            menuScreen.css('z-index', '999');
        }
        else {
            menuScreen.css('opacity','0');
            menuScreen.css('z-index','-1');
        }
    });

}); 
</script>

在这个地方：

buttonMenu.click(function(){
    //alert('clicked');

改成

buttonMenu.click(function(e){
    e.preventDefault();
    //alert('clicked');

---

注意将e添加为函数参数，并添加新行e.preventDefault();

Answer 3

您需要取消锚标记的默认事件。

用这个

$("#buttonMenue").click(function(evt) {
   evt.preventDefault();
});