Prevent screen from moving when clicking on <a href=></a>

css, html

Solution

This is a bit of a hack but you could use a basic css work around:

CSS only Example

#div1 {
    height: 0;
    overflow:hidden;
}
#div1:target {
    height: auto;
    margin-top: -110px;
    padding-top: 110px;
}
#div2 {
    background:red;
}

<a href="#div1">Click to show</a>

<div id="div1">
    <div id="div2">Content</div>
</div>

If you need it to be a little more flexible you can add some js...

More Flexible Example with JS

$('a').click(function () {
    $('#div1').css({
        'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
            'padding-top': $('#div1').position().top - $(window).scrollTop()
    });
});

Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.

Problem

Original source