页面在菜单点击时跳转到顶部答案

【问题标题】：page jumps to top on menu click页面在菜单点击时跳转到顶部
【发布时间】：2013-09-23 21:44:24
【问题描述】：

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

  });
});

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

【问题讨论】：

“#closeIcon”是一个链接吗？如果是这样，您在点击事件中丢失了 e.preventDefault()。

标签： javascript jquery css scroll

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，没问题，我会以答案的形式发布 html，尽管如果我的答案是设置 void(0)，我该怎么做呢？我已经写过的 javascript / jquery 在哪里适合？
@user1324925 太棒了，很高兴你能弄明白。

【解决方案3】：

另一个正常工作的决定；

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

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

【讨论】：

这是为我工作的，我没有使用标签。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

这在某些情况下可能有用

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

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

【讨论】：

【解决方案7】：

我在这里回答了类似的问题：Prevent background scrolling when overlay appears

要点：在html 标签上使用overflow:hidden 属性，而不是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)

  });
});

【讨论】：