HOME > 制作 > Javascript > jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ！

jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ！

2014/08/21

こんにちは。
今回は jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐです。

以前書いたヘッダー上部固定でページ内リンクがずれる！の方法ではうまくいかない事があったので、他のやり方を試してみたので紹介したいと思います。

bodyタグの閉じタグの直前にjQeryを読み込ませます。
その下に下記のスクリプト読み込ませてヘッダーの高さの所の数値を調節します。

$(function () {
    var headerHight = 200; //ヘッダーの高さ
    $('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;
    });
});