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:

<div id='header'>bunch of stuff and images</div>
<div class='nav'> 
    <a href='#test1'>test1</a>
    <a href='#test2'>test2</a>
    <a href='#test3'>test3</a>
</div>

<div class='content'>
<a name="test1"></a>
<div class='content-panel'>
   <a>test1 project</a>
   bunch of stuff
</div>

<a name="test2"></a>
<div class='content-panel'>
   <a>test2 project</a>
   bunch of stuff
</div>

<a name="test3"></a>
<div class='content-panel'>
   <a>test3 project</a>
   bunch of stuff
</div>

</div>

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!

Answer 2

I would try:

.content{position:absolute;top:150px;overflow-y:auto;}

to force all your content to always be below the header.

Answer 3

Hi maybe this should do the trick

<a name="AnchorName" class="anchor"></a>

and

.anchor {
   position: relative;
   top: -[number]px;
}

Edit :

Or with anchor like this

<div><a name="AnchorName" class="anchor"></a> Anchor Text</div>

Answer 4

Set z-index parameter to -1. Having it with a high value his puts your div over the others and will be floated over the others.-1 Will set it in a z-ordering less than trhe others. You can also remove it completely if you don't care about specific z-ordering betheen divs in code.

UPDATE: Fixed position will also cause your div to be "anchored" in a place of the page, and be expanded without "pusing" the others. Please also consider changing CSS position element value (http://www.w3schools.com/css/css_positioning.asp).