こんにちは。
今回は jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐです。
以前書いたヘッダー上部固定でページ内リンクがずれる！の方法ではうまくいかない事があったので、他のやり方を試してみたので紹介したいと思います。
bodyタグの閉じタグの直前にjQeryを読み込ませます。
その下に下記のスクリプト読み込ませてヘッダーの高さの所の数値を調節します。
[javascript]
$(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;
});
});
[/javascript]
上記のスクリプトではヘッダーの高さ分位置をずらして移動します。
コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)
簡単にできるのでオススメです。
以上でjQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ！でした。
