Question

所以，我不知道怎么说这个，但是当我点击我的移动导航菜单的按钮时，它会禁用滚动功能，但它会直接回到页面顶部。我知道这是因为高度是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');
});

Answer 1

没关系，简单修复。使用HTML交换正文。

防止无滚动按钮返回页面顶部

1 个答案: