How to avoid the default Page behaviour of jumping on to the TOP when any overlay appears?

I have a clickable button on the bottom. As soon as I click on the button, it opens an overlay but the page jumps to TOP.(I mean to say, Page goes to top- the same way as when it loads). I want to avoid this behaviour and page should be centered at the bottom only rather than jumping to the 开发者_如何转开发TOP when my overlay div appears.

My Code is

onclick="showOverLay();"

function showOverLay()
{
 $('.overlayBarcode').fadeIn('normal');
 return false;
}


div.overlayBarcode {
    background: url("/DiscoverCenter/images/white.png") no-repeat ;
    _background: url("/DiscoverCenter/images/white.png") no-repeat ;
    display: none;
    margin: auto;
    padding:  40px;
    width: 576px;
    z-index: 10000;
}

Please let me know, how to solve this problem.I am trying this since a long.

Thanks

Is it a link? With a hash mark for the href? If so, that's the culprit.

You need to prevent default in your click function

This is just an example function

$('a.some_class').click(function(e){
    e.preventDefault();
    var some_example = document.getElementById('artist_one').offsetHeight;
    $('#some_id').css("height", container_height );
});

Why don't you just grab and then restore the scroll?

var showOverLay = function(){
    var curScroll = $(window).scrollTop();

    $('.overlayBarcode').fadeIn('normal', function(){
        $(window).scrollTop(curScoll);
    });

    return false;
};

or

var showOverLay = function(){
    var curScroll = $(window).scrollTop();

    $('.overlayBarcode').fadeIn('normal');
    $(window).scrollTop(curScoll);

    return false;
};