JavaScript - 2018-03-25

JQueryでヘッダー固定時のアンカーリンク対策(レスポンシブ対応)

ヘッダー固定時にアンカーリンクを使う時の対策です。
レスポンシブで対応するために「matchMedia」を使いました。

$(function () {     
 if (window.matchMedia( '(min-width: 769px)' ).matches) {      
 var headerHight = 160;    
} else {     
 var headerHight = 80;     
}    
 $('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;     
 });     
});    
Related Posts

Related Posts

要素の高さをJQueryでそろえる方法

2016-11-11

Jqueryで可変する要素を上下中央寄せにする方法

2016-10-25

PCとスマホで見た時に画像切り替える方法

2016-11-22