I have a URL with an anchor that is working as it should:
site.com/item/id#comment-233
When opened, the anchor will be positioned at exactly the top of the page.
How do I change the starting point? Let's say I want it to be 50px down from the top.
The reason I'm needing this is because I have fixed layers at the top of the page, so the comment is appearing overlapped behind the fixed header div.
Just in case, because of cross-browser compliance I prefer a solution that does not involve changing the container of the comment to fixed and positioning top minus the height of the header.
Assuming your <a> tag has no content, add a class to it tag with a position:relative; top:-50px;
Depending on your document, you my also have to wrap it in an absolute <div>
This should be cross-browser compatible if implemented correctly.
EDIT
This is the test I've done locally and it works fine in FF 3.6
<html>
<body style='margin:0; padding:0;'>
<div style='position:fixed; height:50px; background-color:#F00; width:100%'>
Fixed header
</div>
<div style='padding-top:50px'>
<div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>
<a name='linkhere' style='position:relative; top:-75px;'></a>
Link here</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
<div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
</div>
</body>
</html>
This worked a treat for me, based on the above suggestion:
<a name="[my-anchor-name]" class="anchor"></a>
.anchor {
position:relative;
top:-30px; /* or whatever value you need */
}
.anchor{
display: block;
height: 115px; <!--same height as header-->
margin-top: -115px; <!--same height as header-->
visibility: hidden;
}
<span class="anchor"></span>
<div>content...</div>
from http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/