HTMLで<a>タグを踏んだ時に、navbarに重ならないようにしたい！

問題点

bootstrapでnavbarを設置。  

ページ内で<a>タグを使用して画像などにジャンプさせると、  

navbarに画像が重なってしまう現象が発生。  

navbarに重なってる

原因  

<a>タグでジャンプする際は、ジャンプ先のタグ上部に画面上部が一致するような仕様になっている。  

解決策

ジャンプする際に、指定の高さ分更に移動する関数を準備した。  

$(function () {

var windowWidth = $(window).width();

var headerHight = 70; //余分に移動する高さ

$('a[href^="#img"]').click(function() {

var speed = 100;

var href= jQuery(this).attr("href");

var target = jQuery(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top-headerHight;

$('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

 

});

});

 'a[href^="#img"]'は、<a>タグ&href="#img"(idがimgから始まるものすべて)を指す。  

条件を満たすアンカーがクリックされたときにこの関数が発火するようになっている。  

おまけ

修正して実際にジャンプしてみると、ちゃんと直ってました！！  

直った！