Div with scroll over another div with scroll

Question

I have two containers (c1 and c2) with a long list inside of it, one over the other, both with scroll.

I need to be able to keep the c1 scroll position when the c2 opens and c2 has to open in the top of the container.

When I close c2, I need to go back to the same position where I was at c1.

The problem is that c1 is long and remains visible under c2 and I am not able to go from c1 to c2 and come back to c1 to the same scroll position.

I have build a simple example:

HTML:

<div id="container">
<div id="btn1">Show Over DIV</div>
<div id="btn2">Hide Over DIV</div>
<div id="div-under">
  <ul>
    <li>DIV Under</li>
    <li>DIV Under</li>
    <li>DIV Under</li>
  </ul></div>
<div id="div-over">
  <ul>
    <li>DIV Over</li>
    <li>DIV Over</li>
  </ul>
</div>
</div>

Script:

$("#btn1").on("click", function () {

    $("#div-over").fadeIn();
    $("#btn2").fadeIn();
    $("#btn1").fadeOut();
});

$("#btn2").on("click", function () {

    $("#div-over").fadeOut();
    $("#btn1").fadeIn();
    $("#btn2").fadeOut();
});

CSS:

#container {
    width: 100%;
    height: 100%;
}
#btn1 {
    position: fixed;
    top: 0;
    left: 200px;
    z-index: 15;
    background-color: yellow;
}

#btn2 {
    display: none;
    position: fixed;
    top: 0;
    left: 300px;
    z-index: 25;
    background-color: yellow;
}

#div-under {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: green;
}

#div-over {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 20;
    background-color: red;
}

https://jsfiddle.net/jx9dryz7/

Answer 1

Can you check once by adding only one more css property to both of your container DIVs

overflow: auto;

The CSS should be like follows

#div-under {
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 10;
background-color: green;
overflow: auto;
}

#div-over {
display: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 20;
background-color: red;
overflow: auto;
}

 $("#btn1").on("click", function () { $("#div-over").fadeIn(); $("#btn2").fadeIn(); $("#btn1").fadeOut(); $("#div-under").scrollTop(0); }); $("#btn2").on("click", function () { $("#div-over").fadeOut(); $("#btn1").fadeIn(); $("#btn2").fadeOut(); $("#div-over").scrollTop(0); });

 #container { width: 100%; height: 100%; } #btn1 { position: fixed; top: 0; left: 200px; z-index: 15; background-color: yellow; } #btn2 { display: none; position: fixed; top: 0; left: 300px; z-index: 25; background-color: yellow; } #div-under { width: 100%; height: 100%; position: absolute; top: 0; z-index: 10; background-color: green; overflow: auto; } #div-over { display: none; width: 100%; height: 100%; position: absolute; top: 0; z-index: 20; background-color: red; overflow: auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="container"> <div id="btn1">Show Over DIV</div> <div id="btn2">Hide Over DIV</div> <div id="div-under"> <ul> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> <li>DIV Under</li> </ul></div> <div id="div-over"> <ul> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> <li>DIV Over</li> </ul> </div> </div>