javascript - Unwanted browser scrollbar change when overlaying DIV is displayed -

i have div following style:

#dialog_overlay {     width:100%;     height:100%;     background:#000000;     opacity: 0.5;     position:absolute;     top:0;     left:0;     z-index:2000;     display:none; } 

at bottom of page there link:

<a href="#" onclick="test()">test</a> 

function test looks this:

function test() { var overlay = $('#dialog_overlay')[0];  var body = document.body; var html = document.documentelement;  var height = math.max( html.scrollheight, html.offsetheight, body.scrollheight, body.offsetheight, html.clientheight );  overlay.style.height = height + "px"; overlay.style.display = 'inline'; } 

i keep browser scrollbar position unchanged click link @ bottom of page. happens when div displayed, scrollbar pops up. know how keep scrollbar @ position before link clicked?

you have use event.preventdefault();

function test(e) {     e.preventdefault();     ... }