Is there a way to margin an anchor in css?

Question

I have a fixed header height 50px. In my body, I have a lot of anchors. The problem is that, when I click on links pointing to anchors, the anchor appears under my fixed header and I lose 50px of content (I need to scroll up of 50px to read content under the header).

Is there a way to margin an anchor of 50px? My body is filled with a lot of box (divs) with a margin between themself, so I can't put in place an empty div of 50px and then anchor after it..

html:

<div id="header"></div>
<div id="content">
     <div class="box" id="n1"></div>
     <div class="box" id="n2"></div>
     <div class="box" id="n3"></div>
</div>

css:

#header{
    height: 40px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: fixed;
    text-align: center;
    z-index:2;
}

#content{
    padding-top: 50px; 
    margin: 0px;
}

.box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    vertical-align : top;
    padding: 1.4%; /* Keep it in percent (%) */
    margin-bottom: 30px;
    min-height: 200px;
}

Answer 1

If the header is truly fixed then place your anchors in a scrollable div. Then the div containing the anchor will scroll instead of the entire page. Visit the fiddle and click on anchor1. It goes to anchor2. And so forth.

http://jsfiddle.net/mrtsherman/CsJ3Y/3/

css - set overflow hidden on body to prevent default scrolling. Use position absolute on the new content area with top and bottom set. This forces it to stretch to fit the remaining viewport window.

body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content { 
    overflow: scroll; 
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100%;
    border: 1px solid blue; 
}

html

<div id="header">header</div>
<div id="content">
    <div>
        Page Content <br />
        <a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>                
        <a id="a2" href="#anchor1" name="anchor2">Anchor 2</a>   
    </div>
</div>​

Answer 2

If you use jQuery, you use this function:

function scrollToAnchor() {
    if($(".jquery-anchor").length > 0 && document.URL.indexOf("#") >= 0){
    var anchor = document.URL.split("#")[1];
    $(".jquery-anchor").each(function() {
        if($(this).attr("name") == anchor) {
            $("html,body").animate({
                    scrollTop: $(this).offset().top - 50},
                'slow');
            }
        });
    }
}

then add the class "jquery_anchor" to your anchor

Answer 3

For Pure CSS solution just use another div with oposited margin :)

<style>
.anchor {
     margin-top: -50px; 
     margin-bottom: 50px;
}
</style>

<div id="n1" class="anchor"></div>
<div class="box"></div>

Answer 4

It is an old thread, i know - but maybe other people has the same question.

An Opportunity is setting a top padding to each anchored div like this:

.box{ padding-top: 50px; ... }

Now your anchor scroll will reach the box without any empty containers before, and the padding you add in CSS will give you the space to show the content directly under your header.