Store scroll position before body fadeOut, then return scroll position after body fadeIn?

Question

I want to create a decent scrolling experience for a mobile menu, my idea is to .fadeIn the menu, and to fade out the main site wrapper with .fadeOut, so you get a better elastic scroll for mobile devices, without the glitchy position:fixed/body scrolling underneath business that is still happening even on iOS 10 and Android.

Obviously when the wrapper is display:none the body becomes just the height of the viewport, which jumps the page to the top, is it possible to return the old scroll position once the wrapper has faded back in?

Fiddle here: https://jsfiddle.net/y1goy3b2/

Any help or questions would be great!

Cheers

<div class="menu" id="open-menu">
  <div class="menu-bttn">

  </div>
</div>
<div class="mob-menu">

</div>
<div class="site-wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prodest, inquit, mihi 
eo esse animo. Non dolere, inquam, istud quam vim habeat postea videro; Et 
ille ridens: Video, inquit, quid agas; Hinc ceteri particulas arripere conati 
suam quisque videro voluit afferre sententiam. Inde sermone vario sex illa 
</p>
</div>
<script>
$('#open-menu').click(function() {
    $('.site-wrapper').fadeToggle('fast');
    $('.mob-menu').fadeToggle('fast');
});
</script>

Answer 1

I have updated your fiddle. Please check this

    var oldScrollposition = 0;
$('#open-menu').click(function() {

  if($('.site-wrapper').is(":visible")){
    oldScrollposition = $(document).scrollTop();
  }

    $('.site-wrapper').fadeToggle('fast');
    $('.mob-menu').fadeToggle('fast');

  $(document).scrollTop(oldScrollposition);
});