JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="main">
    Try scrolling a bit before you hit the button, then backout to main screen, you'll be reading this again, because page scrolled back to top when .css('display') changed. Now try hit this button and then do it again!
    <button onclick="$(this).text('Display will not change anymore!');$(this).prop('disabled',true); display=1;">
      Do not change display!
    </button>
    <br>
    <br>
    <button onclick="navigateIn('url0');">Navigate In!</button>
  </div>
  <div id="navigate"></div>
</body>

CSS

#navigate {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  overflow: auto;
}

JavaScript

var display = 0;

function navigateIn(url) {

  $.get('https://fiddle.jshell.net', function(data) {
    data = 'Blablabla... Enjoy navigating in '+url+', you can back-up by clicking <a href="javascript:void(0)" onclick="navigateOut();">here</a><br>There would be some content in background, but it\'s hidden now!';
    for (i = 0; i < 35; i++) {
      data += "<br>Some different content!";
    }
    $('#navigate').html(data);
    $('#navigate').fadeIn(200, function() {
      $('#main').css('overflow', 'hidden'); //Is this helpful?
      $('#main').css('visibility', 'hidden'); //Is this helpful?
      if (display == 0) {
        $('#main').css('display', 'none'); //Is this helpful? This void the scrolltop of the body, so it's not my greatest choice
      }

    });
  });
}

function navigateOut() {
  $('#main').css('overflow', '');
  $('#main').css('visibility', '');
  $('#main').css('display', '');
  $('#navigate').fadeOut(200);
}
$(document).ready(function() {
  data = "";
  for (i = 0; i < 40; i++) {
    data += "Some content, index: " + i + " <br><button onclick=\"navigateIn('url"+(i+1)+"');\">Navigate In!</button>";
  }
  $('#main').append(data);
})