Handle multiple scroll with overflow:auto

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);