How to fix my anchor link issue

Question

I have a question regarding the anchor tag.

I have a page like

    bunch of stuff….and iamges



   <         


        
      

Answer 1

Here is a really odd way of doing it...

Suppose this is your HTML, place the anchor (no content!) right before the element of interest:

bunch of stuff and images
 
    test1
    test2
    test3





   test1 project
   bunch of stuff




   test2 project
   bunch of stuff




   test3 project
   bunch of stuff

And apply this CSS:

body {
    margin: 0;
}
#header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    height:150px;
    background-color: rgba(125,125,20,0.6)
}
.nav {
    margin-top: 150px;
    border: 0px solid blue;
    padding: 10px;
    width: auto;
    border-bottom: 1px solid blue;
}
.content {
    overflow: auto;
}
.content-panel {
    background-color: lightgray;
    margin: 0px 0;
    padding: 10px;
    height: 400px;
}
a:target {
    display: block;
    line-height: 0;
    margin-bottom: 150px;
}

See demo at: http://jsfiddle.net/audetwebdesign/6gHE6/

The trick involves using the :target selector to add a margin to the bottom of the anchor equivalent to the height of the fixed header.

This generates some extra white space in your page, oh well... like I said, a bit of an odd way of doing it.

Alternatively, a JavaScript/jQuery fix might be the ticket!