モバイルメニューが閉じられた後にスクロール位置を復元する

Question

jqueryを使用してメニューのdivにdisplay：noneのdisplay：blockを持つcssクラスを追加して、モバイルメニューを開閉しています。 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

ここで問題となるのは、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"); 
      } 
     } 
    }); 
}); 

Answer 2

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

この関数はあなたに有用である可能性があります。