In order to get a cross-browser/cross-device solution where your anchor is truly invisible in the sense that it does not take up any space on the page, it is important that you format your anchor tag like this:
<a name="foo" class="top"></a>
We used a class so you can style all of your anchor tags at once, (assuming the fixed div is part of your normal page template)… you could set it as an ID as the question poses though.
And format your CSS as follows:
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}
Using Position: relative allows you to pull the anchor our of the normal page flow.
setting the top to a negative dimension that equals the height of your fixed element will push the content you are jumping to into full view.
Browsers such as Chrome do not respect this positioning unless the anchor actually displays. Adding content to the anchor such as will force the anchor to display but in many instances that would create a vertical space as big as the line-height of the <a>, so it is better to set the display to block and the width and height to 0.