jQuery actions are causing the page to scroll to the top -

i have bunch of lis:

<li id="rules-button">rules</li> <li id="download-button">download wk</li> <li id="gallery-button">gallery</li> 

and have jquery actions associated show , hide divs:

var rulesbutton = $( '#rules-button'), downloadbutton = $( '#download-button' ), gallerybutton = $( '#gallery-button' ); 

...

rulesbutton.on("click", function(){     home.fadeout(300);     gallery.fadeout(300);     contact.fadeout(300);     about.fadeout(300);     download.fadeout(300);     rules.delay(300).fadein(300);     return false; }); downloadbutton.on("click", function(){     home.fadeout(300);     gallery.fadeout(300);     contact.fadeout(300);     about.fadeout(300);     rules.fadeout(300);     download.delay(300).fadein(300);     return false; }); gallerybutton.on("click", function(){     home.fadeout(300);     download.fadeout(300);     contact.fadeout(300);     about.fadeout(300);     rules.fadeout(300);     gallery.delay(300).fadein(300);     return false; }); 

whenever click on them, scroll top of page before showing other div. common problem common solution? thanks.

i figured out since making divs disappear, there no element fill space. gave container div min-height attribute.