Change display property scrolls the page to it's top

[spoiler]

I have a problem with changing objects display property with Javascript.I fill a table from data in a \[code\]mysql\[/code\] database using \[code\]php\[/code\], and for each row it makes a \[code\]DIV\[/code\] with \[code\]display:none\[/code\] property as I want, and I have a simple JavaScript function to show/hide the \[code\]div\[/code\].Here is \[code\]css\[/code\] for \[code\]div\[/code\] :\[code\]display:none; /*initially menu item is hidden*/position: absolute; /*absolute positioning to float*/background-color:#fff;width:230px;min-height:120px;right:60px;border:5px solid #ccc;text-align:right;direction:rtl;padding:10px;border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; \[/code\]and this is the javascript :\[code\]function showfield (a) { document.getElementById(a).style.display = "block"; }function hidefield (a) { document.getElementById(a).style.display = "none"; }\[/code\]The function works and divs show at the place they must, but the problem is :when I call the JavaScript function to show, it shows the div but the page scrolls to its top and for seeing the opened div I should scroll down, as my page is a report page it may be a long long page and this is not a good happening at all!I can't understand why its happens and is there a way to prevent this auto scrolling?