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

【问题标题】：why page scroll to top after toggle menu为什么切换菜单后页面滚动到顶部
【发布时间】：2016-11-23 22:40:24
【问题描述】：

我的菜单有一个固定的类，单击按钮后容器显示为无，并且菜单显示，但是当再次单击它以获得切换效果时，页面滚动到顶部，我希望它出现在单击按钮的相同位置。由于 menumobileactive 类覆盖了所有页面，我使用了一个 absolute 类来改变他让它滚动的属性，但是当容器再次显示时，它会出现在页面的顶部。容器怎么会出现在按钮被点击的地方

$("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>

这里是上传casarossa.com.mx的页面，尝试切换移动版的按钮，为什么在页面末尾点击时，它会在开始时重置容器？？？

【问题讨论】：

您介意提供更多代码吗，这是您所描述内容的工作示例。
是的，当我单击我的按钮时，容器不显示，但是当再次单击它时它会显示，但它会在其顶部显示 div。例如，如果用户单击容器中间的按钮，我希望它再次出现在 ht emiddle 而不是 div 的顶部
你能把你的代码做成一个包含 HTML 的栈 sn-p 吗？
有html
Menu desktop 被转换成 menumobile for mobile 和 menumobileactive 是 mobile 上的链接

标签： jquery css

【解决方案1】：

试试这个：

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

【讨论】：

这确实有效，感谢您的支持，我希望容器 div 再次出现在用户离开它的位置，例如当我的页面有图像时，如果用户切换按钮容器具有用户单击按钮的位置或图像，而不是出现在顶部
如果你只选择导致显示的类：无；我不明白为什么职位应该改变。
用一行试试，只导致出现和消失。 $(".menu").toggleClass("absolute");按这个名字我可以想象这条线是坏男孩
我使用该类让位置固定的 div 滚动，因为当屏幕不大时可以显示我的所有链接，但是当我再次单击按钮以显示它出现的容器时顶部，而不是它离开的地方
我已经删除了那行，仍然出现在 div 的顶部

【解决方案2】：

发生这种情况是因为这一行： $(".contenido").toggleClass("hide");

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

【讨论】：