ヘッダーがfixed固定のときにページ内アンカーリンクの位置を調節するJavaScript

ヘッダーをposition:fixedで固定させたときに、ページ内アンカーリンクの位置がヘッダーに被ってしまうときの対策方法です。
cssで対処する方法がいろいろあるけれど、手っ取り早くヘッダーの高さ分調節する方法のjs対策を備忘録のために残しておきます。
スマホ表示の時にはアンカーリンクの位置をずらさない記述も書いています。
アンカーリンクの高さを調節するJavaScript
ヘッダーの高さに応じてheaderHightの値を変更するだけです。 状況に合わせて「100」の値を変更してください。
$(document).ready(function() { var headerHight = 100; //ヘッダーの高さ $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if ($target.length) { var targetOffset = $target.offset().top-headerHight; //ヘッダーの高さ分ずらす $('html,body').animate({scrollTop: targetOffset}, 550); return false; } } }); });
スマホのときは高さを調節しないJavaScript記述
PCのときは固定ヘッダーの分の高さに応じてずらしたいけど、スマホのときはアンカーリンクの位置をずらしたくないときのJavaScriptの記述です。
$(document).ready(function() { var headerHight = 100; //ヘッダーの高さ $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){//スマホ以外の時に適応 if ($target.length) { var targetOffset = $target.offset().top-headerHight; //ヘッダーの高さ分位置をずらす $('html,body').animate({scrollTop: targetOffset}, 550); return false; } } } if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){//スマホの時に適応 if ($target.length) { var targetOffset = $target.offset().top; $('html,body').animate({scrollTop: targetOffset}, 550); return false; } } }); });
ちょっと長いか、もっと短くできるかも。
おまけ
アンカーリンクの位置を調節するcss
cssでアンカーリンクの場所をpaddingとネガティブmarginを使って調節するときの記述です。
#hogehoge { padding-top: 100px; margin-top: -100px; }
これでレスポンシブでも大体のヘッダー固定サイトは対応できると思います。