Is There A Way To Margin An Anchor In Css?

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

Solution 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

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

Solution 2:

Welcome to the future:

.box {
  scroll-margin-top: 50px;
}

Source: https://css-tricks.com/almanac/properties/s/scroll-margin/

Solution 3:

If you use jQuery, you use this function:

functionscrollToAnchor() {
    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

Solution 4:

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

<style>.anchor {
     margin-top: -50px; 
     margin-bottom: 50px;
}
</style><divid="n1"class="anchor"></div><divclass="box"></div>

Solution 5:

// For modern browsers, just add the CSS3 :target selector to the page. // This will apply to all the anchors automatically.// ref: http://stackoverflow.com/a/21707103/6220029:target {
    display: block;
    position: relative;
    top: -120px; 
    visibility: hidden;}