Question

我的菜单有一个固定的类，单击按钮后容器显示为无，并显示菜单，但是当再次单击它以进行切换效果时，页面滚动到顶部，我希望它在apear处于单击按钮的位置相同。由于menumobileactive类覆盖了所有页面，我使用绝对类来更改其允许滚动的属性，但是当再次显示容器时，它再次出现在页面顶部。如何将容器放在按钮被遮挡的同一位置

$("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，尝试在移动版本上切换按钮，为什么在页面末尾单击时，它会在开始时重置容器???

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

Answer 2

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

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

切换菜单后页面滚动到顶部的原因

2 个答案: