Question

我正在使用jquery打开和关闭的移动菜单，通过添加一个具有display：block的css类，而菜单div有display：none。 jquery代码有一个部分，当菜单div外部注册了一个点击时，它应该关闭菜单。一切都有效：$("body").scrollTop(scrollpos)。这应该是在scrollTop(0)发生并且菜单已经关闭之后将用户向后滚动回去的位置，但它不会滚动所有滚动卡在顶部。任何帮助将不胜感激。谢谢。

编辑：以下是一个示例：https://jsfiddle.net/mufwwudj/

$(function () {
    var menutoggle = $(".menu-toggle");
    var sidenav = $(".side-nav");

    menutoggle.click(function () {
        var scrollpos = $('body').scrollTop();
        if (!$("body").hasClass("m-nav-open")) {
            $("body").scrollTop(0).addClass("m-nav-open");
        }
        $(document).mouseup(function (e){
        if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
                if ($("body").hasClass("m-nav-open")) {
                    $("body").scrollTop(scrollpos).removeClass("m-nav-open");
                }
        }
        });
    });
});

Answer 1

function ScrollOnTopo() {
        window.scrollTo(0, 0); //It scrolls page at top
    }

此功能可能对您有用。

Answer 2

这里的一个问题是，每次menutoggle.click函数运行时都会分配一个新的mouseup事件。

$(document).mouseup(function (e){
    if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
        if ($("body").hasClass("m-nav-open")) {
            $("body").scrollTop(scrollpos).removeClass("m-nav-open");
        }
    }
});

只有第一个传递条件，即使每个都会触发，并且scrollpos总是等于第一个mouseup事件监听器中的任何内容。

我不知道你是如何测试它的，或HTML是什么样的，但如果你第一次单击它时位于页面顶部，mouseup事件中的scrollpos将始终为0。

尝试一次分配mouseup事件，并将scrollpos放在两者之外，以便可以在两者中访问它。

$(function () {
    var menutoggle = $(".menu-toggle");
    var sidenav = $(".side-nav");
    var scrollpos;

    menutoggle.click(function () {
        scrollpos = $('body').scrollTop();
        if (!$("body").hasClass("m-nav-open")) {
            $("body").scrollTop(0).addClass("m-nav-open");
        }
    });

    $(document).mouseup(function (e){
        if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
            if ($("body").hasClass("m-nav-open")) {
                $("body").scrollTop(scrollpos).removeClass("m-nav-open");
            }
        }
    });
});

移动菜单关闭后恢复滚动位置

2 个答案: