web-dev-qa-db-ja.com

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

ヘッダーの高さが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：

#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;
}
htmlcssanchor
21
Pier-Alexandre Bouchard

ヘッダーが本当に固定されている場合は、スクロール可能なdivにアンカーを配置します。次に、ページ全体ではなく、アンカーを含むdivがスクロールします。フィドルにアクセスし、anchor1をクリックします。 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>​
6
mrtsherman

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

次に、クラス「jquery_anchor」をアンカーに追加します

4
ndemoreau

純粋なCSSソリューションの場合は、マージンが反対の別のdivを使用するだけです:)

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

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

それは古いスレッドだと思いますが、他の人にも同じ質問があるのか​​もしれません。

Opportunityは、次のように各アンカーdivに上部パディングを設定しています。

.box {padding-top：50px; ...}

これで、アンカースクロールが空のコンテナなしでボックスに到達し、CSSで追加したパディングにより、ヘッダーのすぐ下にコンテンツを表示するスペースが確保されます。

0
user10301101