onclick does not work with some scrollTop values - onclick

Question

I encountered a strange problem, maybe someone can help.
There are multiple img on the page, each one is defined as:
<td><img src="img1" onmouseout="Hide(\'div1\');"></td>
When user clicks on the image, the hidden div should appear in the middle of the page and disappear on the mouseout.
This is hidden div:
<div id="div1" style="width:400px;height:220px;padding:8px;position:absolute;display:none;border:6px solid #CC6600;background-color:#FFDAB4">
Everything works fine till I start scrolling up and down. At some specific positions and at the end of scroll the hidden div is not appearing. Does anyone understand why?
Here is javascript:
function Show (div)
{
var winW=630,winH=460,t,l;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
t=winH/2-240/2+scrollTop;
l=winW/2-400/2+scrollLeft;
document.getElementById(div).style.top=t+"px";
document.getElementById(div).style.left=l+"px";
document.getElementById(div).style.display="block";
}
function Hide(div)
{
document.getElementById(div).style.display="none";
}
I just realized that it is not scrollTop problem.
Anchor inside div does not occupy whole div, only lower portion. Strange that cursor changes on the whole img, onclick is called on the whole img, but hidden div shows only when clicking on the lower portion.
I tried style="display:block" without any success. Out of desperation, I put style="opacity:0.9" and it does work! The only problem is that hidden div shows behind img (like having z-index lower than img). I am not using z-index since hidden div is position:absolute.
* Still looking for some smart person!!!

Answer 1

Try jQuery solution
$(function() {
$('body').scrollTop(0);
});
Meanwhile if you want a JavaScript solution try
document.body.scrollTop = document.documentElement.scrollTop = 0;