JSFiddle - React, Tailwind, and code Playground

by dmitri14

HTML

<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />

<div>
  <button class="open">Open</button>
</div>

<div class="map" style="height:300px;background:#aaa;">
  This IS the MAP
</div>

<div>
  <button class="close">close</button>
</div>

<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />
<img src="https://unsplash.it/200/300" />

JavaScript

$('.open').click(function(){
	$('.map').slideDown(300);
});

$('.close').click(function(){
  $('.map').slideUp(300);
  var sctop = $(window).scrollTop() - $('.map').height();
 	$('html, body').animate({scrollTop : sctop}, 300);
});