Handle multiple scroll with overflow:auto - html

Question

There are many popup on a page which have overflow:auto property
Structure is -
<div id="popup1">
<div>SomeHTMLSTRUC</div>
<div>SomeHTMLSTRUC</div>
<ul class="scroll"></ul>
</div>
<div id="popup2">
<div>SomeHTMLSTRUC</div>
<div>SomeHTMLSTRUC</div>
<ul class="scroll"></ul>
</div>
This ul has this class of scrolling property.
Now once if I scroll to bottom in one of the popup. How do I set scroll to top when the next time I open another popup popup?

Answer 1

Add
document.getElementById('popup1').children[0].scrollTop = 0;
before the code to open the popup. This assumes that <ul> is the first any only immediate child of the <div>.
Working demo: http://jsfiddle.net/sdz8nc3j/
EDIT: With the recent update to the question making the <ul> the third child, you need to change the [0] to [2]. You could also just find the <ul> instead of relying on the number of children:
document.getElementById('popup1').getElementsByTagName('ul')[0].scrollTop = 0;
Working demo: http://jsfiddle.net/sdz8nc3j/3/
I also made a jQuery version, although it doesn't really save you anything. It also searches for the <ul>.
$popup1 = $("#popup1");
$popup1.click(function(){
$popup1.children('ul').scrollTop(0);
});
Working demo: http://jsfiddle.net/sdz8nc3j/1/

Answer 2

Use this:
document.getElementById("popup1").childNodes[2].scrollTo(0, 0);
This works if the UL is the third child!
jQuery version:
$("#popup1").find("ul").scrollTo(0, 0);