Unwanted browser scrollbar change when overlaying DIV is displayed

Question

I have a DIV with 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 the bottom of my page there is a link:

<a href="#" onClick="test()">Test</a>

Function Test looks like 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 would like to keep the browser scrollbar position unchanged as I click the link at the bottom of the page. What happens now is that when the DIV displayed, the scrollbar always pops up. Does anyone know how to keep the scrollbar at the position where it is before the link is clicked?

Answer 1

You have to use event.preventDefault();

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