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

我有一个移动菜单，打开和关闭使用jquery通过添加一个css类具有显示：块，而菜单div显示：无。 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"); 
       } 
     } 
     }); 
    }); 
});

来源

2016-04-25 Grim Vic

你能分享一个URL来解决这个问题吗？ jsfiddle将工作。 – Vishwanath

看起来代码是这样的：jsfiddle.net/mufwwudj尝试在打开菜单之前滚动到“ZZZZZ”，然后打开菜单并关闭它。而不是滚动回ZZZZ它保持在顶部 –

你在哪个浏览器检查这个。您的代码在第一次尝试时适用于我。 – Vishwanath

这里的一个问题是，您每次运行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样子，但如果你是在页面顶部的第一次点击它，在鼠标松开事件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"); 
      } 
     } 
    }); 
});

来源

2016-04-25 14:42:10 spaceman

它仍然无法正常工作。我会尝试做一个HTML和所有的jfiddle，我会在这里发布 –

看看代码是这样的：https://jsfiddle.net/mufwwudj/尝试滚动到“ZZZZZ”之前，你打开菜单然后打开菜单并关闭它。而不是滚动回ZZZZ它保持在顶部。 –

它在Chrome上适用于我，您使用的是哪种浏览器？ – spaceman

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

此功能可能对你有用。

来源

2016-04-25 14:11:13

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

回答

相关问题