固定ヘッダーメニュー時の、別ページアンカーリンクではまったメモ【WordPress】

hoge

いやー、はまったはまった。

 

上部ヘッダーメニューを固定（position:fixed）の時に、別ページへのアンカーリンクがうまくいかないのなんの。

えぇ・・・、ズレてしまうんですねぇ（ため息）

 

またやりそうなので、備忘録として残す。

 

 

重要なのは、

画面を確認する時は、WordPress管理画面からログアウトしておくこと！！！

これは、WordPress管理画面も固定ヘッダーだから、動作確認でcssに誤差がでるため。

 

WordPressで別ページアンカーリンクは
『/#id名』（スラッシュ忘れずに！）にすること！！

// NG
<a href="ファイル名#id名"></a>

// OK！！
<a href="ファイル名/#id名"></a>　（"#"の前に"/"を追加）

// 飛ばし先はこんな感じで。
<a id="hoge"></a>

 

 

別ページアンカーリンクすると、固定ヘッダー（fixed）の高さのせいで、アンカー場所がずれるので、その対策をcssで行うこと。

参考サイト：position:fixedでヘッダ固定時のページ内リンクのずれを解消したい

HTML

<div id="header">
    ヘッダーがはいります
</div>
<div id="content">
    <a href="#link01">リンク元</a>
    <p>*********</p>
    <p>*********</p>
    <p>*********</p>
    <a id="link01">リンク先</a>
    <p>*********</p>
</div>

 

CSSで調整する場合

padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。

　　　margin-top:-100px;
　　　padding-top:100px;

#header {
    width: 100%;
    min-width: 960px;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    z-index: 10;
}
#content{
    padding-top: 100px; /* ★ヘッダの高さを設定する。 */
}
#content a[id]:not([href]) { /* idが属性にありかつ、hrefの属性がないもの */
    margin-top:-100px; /* ★ヘッダの高さを設定する。 */
    padding-top:100px; /* ★ヘッダの高さを設定する。 */
}

 

 

javascriptで調整する場合

ヘッダの高さ分、ページTOPの位置をずらして移動します。

※jQueryを使用しています。

$(function () {
    var headerHight = 100; /* ★ヘッダの高さを設定する。 */
    $('a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; /* ヘッダの高さ分位置をずらす処理 */
        $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
    });
});

 

 

わたしの場合、これだけではまだダメで、さらにcssの設定が必要だった。

#content a[id]:not([href]) {
padding-top: 100px;
margin-top: -100px;
display: inline-block; /* ★これ重要！ */
vertical-align: top; /* ★これ重要！ */
}

displayとvertical-alignの設定をすると、IE、firefox、chrome、safariで動作確認OK！！

cssは奥が深い。
いつになったらプロcssマーになれることやら。

 

 

追記（動作未確認）

こういう設置（設定）の仕方だと、コンテンツとアンカーリンクの間に隙間ができないらしい。（未確認）

<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h4>
</a>