Question

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

https://williamhrtanto.com/msa/about/这是我正在努力的网站，所以你们可以直接查看它目前是如何运作的

目前的问题是每当我点击按钮显示菜单时，它都会返回到页面顶部

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

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

三江源

Answer 1

删除不透明度
设置显示：无，位置：固定
点击设置显示块

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();
});

HTML Absolute元素onclick返回页面顶部

3 个答案: