固定ヘッダー サイト内、ページ内#リンクとページ外#リンク

固定ヘッダーを利用している際は
ページ内の#リンクに注意が必要です。

な〜んにも考えないでコーディングしていると、
アンカー上部がヘッダーに隠れてしまう!って後から気づくんですよね・・・。

で、どうするか調べるといろいろでてくるんですけど。

CSSで対応
#contents{
   margin-top:-100px;
   padding-top:100px;
}

ただし、ブラウザによって微妙にずれちゃうこともあります。IEとか・・・。

JavaScriptで対応

1.jqueryを読み込む

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

※バージョンは何でもいいです。

2.スクリプトを書く

ページ内の#リンクに対応させる記述と
サイト内のページ外#リンクに対応させる記述の合わせ技。
たぶんもっと素敵なコードがあるんでしょうけど、今の私の限界。

$(function(){
var headerHight = 100; //ヘッダの高さ
/*ページ内#リンク*/
        $('a[href^=#]').click(function(){
                var href= $(this).attr("href");
                var target = $(href == "#" || href == "" ? 'body' : href);
                var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
                $("html, body").animate({scrollTop:position}, 550, "swing");
                return false;
        });
 /*ページ外#リンク*/      
        var url = $(location).attr('href');
        if (url.indexOf("?id=") == -1) {
                // スムーズスクロール以外の処理(必要なら)
        }else{
                // スムーズスクロールの処理
                var url_sp = url.split("?id=");
                var hash     = '#' + url_sp[url_sp.length - 1];
                var target2        = $(hash);
                var position2        = target2.offset().top-headerHight;
                $("html, body").animate({scrollTop:position2}, 550, "swing");
        }
});

3.タグを書く

リンク元ページ
<a href="#link">ページ内#リンクの場合</a>
<a href="../hoge/index.html?id=link">サイト内ページ外#リンクの場合</a>

リンク先ページ
<div id="link">
中身
</div>
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中