1

我正在创建一个左侧带有固定菜单的网站，该菜单在单击 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)

  });
});

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

4

7 回答 7

5

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

于 2017-01-18T06:22:11.763 回答
4

这听起来很像一个锚标签问题。在没有看到 HTML 的情况下，我敢打赌：

您的标签（“#closeIcon”）需要在点击时设置 javascript:void(0) 以阻止它重新调整页面位置。介意张贴html吗？

于 2013-09-23T21:47:59.847 回答
1

另一个正常工作的决定；

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

$("#closeIcon").click(function(){
    <...>
    return false;
});
于 2013-09-24T06:41:36.753 回答
0

这是图标按钮的 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>

于 2013-09-24T01:15:11.227 回答
0

我也遇到了同样的情况——我的解决方案是删除<a>菜单图标标签上的 href="#"。

于 2019-03-27T18:50:29.473 回答
0

我在这里回答了一个类似的问题：出现覆盖时防止背景滚动

要点：使用标签overflow:hidden上的属性html而不是body.

这是您修改的代码：

.lock-scroll {
  overflow: hidden;
}

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

$(document).ready(function(){
  $("#menuIcon").click(function(){
    $('html').addClass('lock-scroll');
    $(".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(){
    $('html').removeClass('lock-scroll');
    $(".left").animate({width:'0%'}, "500");
    $(".right").animate({width:'100%'}, "500");
    $("#nav").animate({
                left: '0',
            }, "500" );
    $("#menuIcon").fadeIn(500)
    $("#closeIcon").fadeOut(500)

  });
});
于 2022-01-04T21:08:48.113 回答
0

这可能在某些情况下有用

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

创建一个没有属性的名为 dummydiv 的 div，因为当您单击菜单项时，该 div 实际上并没有在任何地方使用，任何东西都不会移动。这对于 Mobil 设备上的弹出式菜单很有用，尤其是当您不希望页面上到处乱跳时。

于 2019-04-24T20:21:58.690 回答