Question

我正在创建一个左侧有固定菜单的网站，点击jQuery即可看到菜单。我的问题是，当我向下滚动到页面底部并且我想将菜单带入视图时，页面会跳回到顶部。我希望页面在点击菜单时保持当前位置。我怎么能这样做？

这是jQuery为菜单输入和输出动画：

$(document).ready(function(){
     $("#closeIcon").hide()
  });

$(document).ready(function(){
  $("#menuIcon").click(function(){
    $(".left").animate({width:'10%'}, "500");
    $(".right").animate({width:'90%'}, "500");
    $("#nav").animate({
                left: '30%',
              }, "500" );
    $("#menuIcon").fadeOut(500)
    $("#closeIcon").fadeIn(500)


  });
});

$(document).ready(function(){
  $("#closeIcon").click(function(){
    $(".left").animate({width:'0%'}, "500");
    $(".right").animate({width:'100%'}, "500");
    $("#nav").animate({
                left: '0',
            }, "500" );
    $("#menuIcon").fadeIn(500)
    $("#closeIcon").fadeOut(500)

  });
});

菜单本身位于页面外，点击它滑入，主页面调整大小。

Answer 1

定义javascript函数以显示/隐藏菜单的锚标记应具有属性href="javascript:void(0)"。

Answer 2

这听起来非常像锚标记问题。如果没有看到HTML，我会下注：

您的代码（＆＃34; #closeIcon＆＃34;）需要在点击时设置javascript：void（0）以阻止其重新调整页面位置。介意发布html？

Answer 3

这是图标按钮的html，用于打开和关闭菜单：

   <div id="menu">
      <a href="#"><img id="menuIcon" src="images/menuIcon.png"></a>
      <a href="#"><img id="closeIcon" src="images/closeIcon.png"></a>
    </div>

这是点击时打开的菜单的html：

<div class="left">
     <div id="nav">                     
        <div id="accordion">
              <!-- accordion menu goes here -->         
    </div> <!--ends accordion-->    
</div>

Answer 4

另一个正确工作的决定;

<...>
$("#menuIcon").click(function(){
    <...>
    return false;
});    

$("#closeIcon").click(function(){
    <...>
    return false;
});

Answer 5

我遇到了同样的事情-解决方案是删除菜单图标<a>标签上的href =“＃”。

Answer 6

这在某些情况下可能有用

<a href="#dummydiv">Services</a>

创建一个没有属性的div，命名为dummydiv，因为当您单击菜单项时，div实际上并没有在任何地方使用。这对于Mobil设备上的弹出菜单很有用，尤其是当您不希望整个页面都跳起来时。

页面跳转到菜单点击顶部

6 个答案: