Czy istnieje sposób na zakotwiczenie kotwicy w css?

Question

Mam stałą wysokość nagłówka 50 pikseli. W moim ciele mam wiele kotwic. Problem polega na tym, że gdy klikam na linki wskazujące na kotwice, kotwica pojawia się pod moim ustalonym nagłówkiem i tracę 50px zawartości (muszę przewinąć w górę o 50px, aby odczytać zawartość pod nagłówkiem).

Czy istnieje sposób na zakotwiczenie kotwicy o wielkości 50 pikseli? Moje ciało jest wypełniona wieloma pudełka (DIV) z marginesu między samym sobą, więc nie można umieścić w miejscu pustego div 50px a następnie zakotwiczyć po nim ..

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

Jeśli nagłówek jest naprawdę stałe następnie umieścić kotwice w przewijanej div. Następnie div zawierający kotwicę przewinie zamiast całej strony. Odwiedź skrzypce i kliknij anchor1. Przechodzi do anchor2. I tak dalej.

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

css - zestaw przelewowy ukryty na ciele aby zapobiec domyślny przewijanie. Użyj pozycji bezwzględnej w nowym obszarze zawartości z górnym i dolnym zestawem. Zmusza to do rozciągnięcia, aby pasowało do pozostałego okna okna.

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

Jeśli używasz jQuery, należy użyć tej funkcji:

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'); 
      } 
     }); 
    } 
} 

następnie dodać klasę "jquery_anchor" do kotwicy

Answer 3

dla czystego roztworu CSS po prostu użyj innego div z oposited margin :)

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

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