为什么页面在切换菜单后滚动到顶部

我的菜单有一个固定的类，点击按钮后容器显示为无，菜单显示，但当再次点击切换效果时，页面滚动到顶部，我希望它能够在点击按钮的同一个地方播放。由于menumobileactive类覆盖了所有页面，我使用绝对类来改变其滚动的属性，但再次显示容器时，它会显示在页面的顶部。如何可以在容器apear在其中按钮已cliked为什么页面在切换菜单后滚动到顶部

$("button").on("click",function(){ 
    $(this).toggleClass("menu-on"); 
    $(".menumobileactive").toggleClass("visible"); 
    $(".menu").toggleClass("absolute"); 
    $(".container").toggleClass("invisible"); 
}); 

<div class="menu"> 
    <div class="menumobile"> 
     <button> 
      <span class="line line-t"></span> 
      <span class="line line-m"></span> 
      <span class="line line-b"></span> 
     </button> 
    </div> 
    <div class="menudesktop"> 
     <ul> 
      <li><a href="">Link 1</a></li> 
      <li><a href="">Link 2</a></li> 
      <li><a href="">Link 3</a></li> 
      <li><a href="">Link 4</a></li> 
      <li><a href="">Link 5</a></li> 
     </ul> 
    </div> 
</div>

这里一样的地方是uploded页casarossa.com.mx，尝试切换的移动版本，为什么被点击的按钮时，在页面结束时，它会在开始时重置容器？

来源

2016-11-23 Diego Cervantes

你介意提供一些更多的代码，一个你正在描述的实例。 – odedta

是的，当我点击我的按钮，容器显示没有，但当再次点击它显示，但它显示顶部的div。例如，如果用户点击容器中间的按钮，我希望它在ht emiddle时再次出现，而不是位于顶部 –

您是否可以将代码转换为包含HTML的堆栈片段？ – Barmar

试试这个：

$("button").on("click",function(e){ 

    //prevents from scrolling to top behavior 
    e.preventDefault(); 

    $(this).toggleClass("menu-on"); 
    $(".menumobileactive").toggleClass("visible"); 
    $(".menu").toggleClass("absolute"); 
    $(".container").toggleClass("invisible"); 
});

来源

2016-11-23 22:46:28 Steffen

这没有工作，谢谢你的支持，我希望容器div，再次在用户离开它的位置，例如作为我的页面有图像，我想，如果用户切换按钮的容器有位置或用户点击该按钮的图像，而不是顶部 –

如果您只是通过点击鼠标导致显示的类：无;我不明白为什么这个职位应该改变。 – Steffen

试一下，只会导致外观和消失。 $（“。menu”）。toggleClass（“absolute”）; 的名字我可以想象这条线是坏男孩 – Steffen

这是因为这一行的： $(".contenido").toggleClass("hide");

基本上，你并不真的需要隐藏的内容，因为你在移动视图中，只将新的移动菜单（打开时）全屏显示，并在再次单击按钮时将其隐藏。由于您隐藏并将主要内容带回，它会自动滚动到顶部。为什么？我无法真正解释，因为我不知道jQuery是如何工作的，但是删除该行可以解决您的问题。

来源

2016-11-25 18:45:03 odedta

为什么页面在切换菜单后滚动到顶部

回答

相关问题