CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Martin
Martin

Reputation: 11336

Changing default starting position of #anchor

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.

Upvotes: 33

Views: 42493

Answers (6)

Mark
Mark

Reputation: 101

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

Upvotes: 10

lincolnge
lincolnge

Reputation: 1037

.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/

Upvotes: 7

Allan Berger
Allan Berger

Reputation: 391

Adding "display: block;" worked out for me:

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

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

Upvotes: 6

Chris Nicola
Chris Nicola

Reputation: 14574

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.

Upvotes: 0

danieleds
danieleds

Reputation: 668

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.

Upvotes: 4

Damp
Damp

Reputation: 3348

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>

Upvotes: 26

Related Questions