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

2014/08/21

こんにちは。
今回は 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+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

 

簡単にできるのでオススメです。
以上でjQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ!でした。

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

この記事を読んだ人はこんな記事も読んでいますよ

Topへ戻る