Prevent page scrolling to top upon adding fixed position

I'm facing a problem where the page is scrolling to the top whenever I add my .noscroll class to the body. This way the scrollbar is still visible but greyed out whenever the overlay appears.

I know that it's the addClass() function that is the cause of this because when I comment out that line, it doesn't scroll to the top when my overlay appears.

jQuery

$('a').click(function(e) {
    //reset default anchor behavior
    e.preventDefault();

    //add noscroll class to body
    $("body").addClass("noscroll"); 

    //open overlay box
    openOverlayBox(); 
});

The openOverlayBox() function is simply a full browser screen overlay with a black tint.

CSS

body.noscroll{
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

Body HTML

<a href="#">Test</a>

How can I make the scroll position stay the same after the .noscroll class has been added to the body?

EDIT 1: I'm trying to achieve the same as on Facebook. If you view a picture or video, the overlay appears, the scrollbar is greyed out but the scrolled position is maintained.

EDIT 2: I found a very close solution to my issue, but the only thing is that this does not grey the scrollbar out, but just removes it. Also when the content is centered in the middle, it still makes the content jump a little to the right because the scrollbar from the body is hidden.

EDIT 3: After Cuberto's answer and some research of myself I found out what needs to be done to get it working I want. However I don't have a clue how I would start doing it. But this is what should solve it. I when opening the overlay I need to set my main div on position: fixed and a negative top value of the scroll position. When exiting the overlay, the position: fixed; and top attribute should be removed and the same scroll position set as when the overlay was opened.