固定ヘッダー時ページ内リンクでずれるの防止しますよ
Date 2016.03.18 Category blog
ページ内リンクで隠れるの防止
固定ヘッダーを設置した場合にページ内リンクを設置すると、ヘッダ分をどうにかしないとずれてしまいますよね。
そんな時にページ内リンクした時に任意で指定した数値分高さをずらす処理をして対応する場合のメモ
|
1 2 3 4 5 6 7 8 9 10 11 |
// スムーススクロール $(function () { var headerHight = 100; //ヘッダの高さ $('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; }); }); |
