移動菜單關閉後恢復滾動位置

我有一個移動菜單，打開和關閉使用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

移動菜單關閉後恢復滾動位置

回答

相關問題