防止无滚动按钮移回页面顶部答案

【问题标题】：Prevent No-Scroll Button From Moving Back to Top of Page防止无滚动按钮移回页面顶部
【发布时间】：2017-10-23 22:57:34
【问题描述】：

所以，我真的不知道该怎么说，但是当我单击移动导航菜单的按钮时，它确实禁用了滚动功能，但它会直接回到页面顶部。我知道这是因为高度是 100vh，但我想知道是否有解决方法？

HTML：

<div class="menu-button close">
        <span class="menu-one"></span>
        <span class="menu-two"></span>
        <span class="menu-three"></span>
    </div>

CSS：

body.no-scroll { /* added for no scroll on click of menu button */
transition: all 0.3s ease-in-out;
height: 100vh;
overflow: hidden;
}

.menu-button {
height: 40px;
width: 40px;
background-color: #FFFFFF;
border-radius: 50%;
border: 1px solid #FF011D;
margin-top: 30px;
margin-left: calc(100% - 70px);
display: flex;
flex-direction: column;
justify-content:center;
cursor: pointer;
position: fixed;
z-index: 999;
opacity: 0;
transition: all ease-in-out .3s;
transform: translateY(-2em);
overflow: visible;
}

.menu-button.active {
    background-color: #FF011D;
    border-color: #FFFFFF;
    justify-content: flex-end;
    opacity: 1;
}

JQuery:

 $(".menu-button").on("click", function () {
    $(".menu-button").toggleClass("active");
    $(".nav-slide").toggleClass("active");;
    $(".menu-one").toggleClass("active");
    $(".menu-two").toggleClass("active");
    $(".menu-three").toggleClass("active");
    // added this w/ the class of no-scroll
    $('body').toggleClass('no-scroll');
});

【问题讨论】：

标签： jquery css mobile scroll

【解决方案1】：

没关系，简单固定。用 HTML 交换了正文。

【讨论】：