Home » Html » Changing default starting position of #anchor

Changing default starting position of #anchor

Posted by: admin November 27, 2017 Leave a comment

Questions:

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.

Answers:

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>

Questions:
Answers:

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 */
}

Questions:
Answers:
.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/

Questions:
Answers:

Adding “display: block;” worked out for me:

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-50px;
    display: block;
}

Questions:
Answers:

This code works on Firefox, Chrome, IE and probably others too:

<a id="comment-3" class="shifted_anchor">&nbsp;</a>
<div>
    ... comment ...
</div>

Where this is the stylesheet:

a.shifted_anchor {
  position: relative;
  top: -35px;
  margin: 0;
  padding: 0;
  float: left;
}

The key is the float attribute: we use it to avoid the extra vertical space caused by &nbsp;, which in turn is needed for cross-browser compatibility.

Questions:
Answers:

So I combined a couple of the ideas here and came up with one that works well for me and across all browsers. The empty anchors do not seem to work well with webkit browsers, definitely doesn’t work on Chrome. Adding a pseudo element to the anchor fixes this without breaking layouts.

a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
  content:"";
  float: left;
  height: 0px;
}

Just replace $offsetHeight with whatever you need.