jquery - JavaScript: Need lower div (under absolute div) NOT to scroll -

i have issue layout of website right now...

the layout similar fiddle made. top layer has project thumbnails, , lower layer gets exposed show project details when user clicks thumbnail.

problem having user has scroll down click thumbnail on top layer. then, when layer fades out, lower div has scrolled - , need div scrolltop(0) instead...

please see fiddle understand talking about:

$('#click').on('click', function(){  	$('#toppanel').fadeout(600);  })

#click {    padding:10px 15px;    position:fixed;    z-index:100;  }    #toppanel, #bottompanel {    width:80%;    height:auto;    margin:0 auto;    padding:100px;    text-align:center;  }  #toppanel {    background:green;    position:absolute;    z-index:10;  }  #bottompanel {    background:yellow;    position:absolute;    z-index:0;  }  #toppanel p, #bottompanel p {    padding: 500px 0;    text-transformation:uppercase;  }  #bottompanel p:nth-child(odd){    background:#555;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button id="click">click me fadeout top</button>  <br>  <p>please scroll down , click button above see issue</p>    <div id="toppanel">    <p>top of page</p>    <p>middle of page</p>    <p>bottom of page</p>  </div>    <div id="bottompanel">    <p>top of page</p>    <p>middle of page</p>    <p>bottom of page</p>  </div>

https://jsfiddle.net/reese329/50urkgtm/

the problem panels aren't scrolling: whole document scrolling! trick set overflow: hidden on wrapper element (or body), , make panels scrollable overflow-y: scroll. here working example.

notice had set height of panels explicitly (to 100vh, filling viewport).

i fixed text-transform: uppercase rule (the style text-transform, not text-transformation :) ).