I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):
<html>
<div id="container">
<div id="thing1" class="thing" >
<p>Some visible stuff 1</p><a href="#" onclick="Effect.toggle('extra1');">More1</a>
<div id="extra1" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<div id="thing2" class="thing">
<p>Some visible stuff 2</p><a href="#" onclick="Effect.toggle('extra2');">More2</a>
<div id="extra2" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
<!-- 96 more entities of class="thing" -->
<div id="thing99" class="thing">
<p>Some visible stuff 99</p><a href="#" onclick="Effect.toggle('extra99');">More99</a>
<div id="extra99" style="display:none;">
<p>Some extra and initially invisible stuff</p>
</div>
</div>
</div>
</html>
When I click on the "More99" link at id="thing99" which is way down at the bottom of the page, , the div at id="extra99" appears as it should, but the page then the page automatically scrolls back to the top.
When I clck the "More1" link at the top, it stays focused at the top.
Is there anyway I can keep the page from scrolling back to the top and/or to refocus it back to where I just clicked? I don't want to scroll back down and find out which one I just made visible.