CSSにアンカーをマージする方法はありますか？

Question

固定ヘッダーの高さは50pxです。私の体には、たくさんのアンカーがあります。問題は、アンカーを指し示すリンクをクリックすると、固定ヘッダーの下にアンカーが表示され、50pxのコンテンツが失われることです（ヘッダーの下にあるコンテンツを読むには50pxまでスクロールする必要があります）。

アンカー50pxに余裕を持たせる方法はありますか？私の体は、その人自身との間のマージンをボックスの多く（のdiv）で満たされているので、私は場所では50pxの空のdivを入れて、それの後に固定することはできません。..

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：ヘッダが本当にその後、固定スクロール可能なdivの中にあなたのアンカーを配置している場合

#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

。次に、アンカーを含むdivがページ全体の代わりにスクロールします。フィドルに行き、アンカー1をクリックしてください。それはanchor2に行く。その他

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

CSS - デフォルトのスクロールを防ぐために、身体に隠された設定オーバーフロー。上部と下部が設定された新しいコンテンツ領域で絶対位置を使用します。これにより、残りのビューポートウィンドウに合わせてストレッチされます。

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

あなたはjQueryのを使用する場合は、この機能を使用します。

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

その後、ピュアCSSソリューションについてごアンカー

Answer 3

にクラス "jquery_anchor" を追加余白を付けて別のdivを使用してください:)

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

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