Long page of divs: Use Effect.toggle to expand a div at bottom: Page scrolls back to top

I have a page of things that looks like this (and yes, I have included the scriptaculous javascripts, because the toggle actually does work):

<开发者_JS百科;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.

Try return false; after your Effect.toggle(); calls.

<a href="#" onclick="Effect.toggle('extra99'); return false;">More99</a>

This isn't the ideal way of handling this, but it should fix your immediate problem. Ideally, you would remove all of your Javascript from your HTML, and do away with all onclick attributes, handling everything from a remote block of Javascript.

Jonathan & Tatu started me on the right track. I tried "return false", and it worked some of the time.

With the "return false" concept in hand, I searched GOogle and stumbled on this page for hrefs and return false.

That "#" tag kept returning me to the top of the page. I tried href="" without the "return false", and it worked as desired, but it randomly reloaded the page as well.

The following solution gave me what I wanted consistently:

<a href="" onclick="Effect.toggle('extra99'); return false;">More99</a>

Everything worked as desired, and no random page reloads.