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