ページの一番上にヘッダーやナビゲーションを固定する場合、ページ内アンカーリンクがずれる問題
cssで固定の分の調整をする
.link-margin {
margin-top: -100px;
padding-top: 100px;
}
スムーススクロールとヘッダー固定の調整のJavaScriptを書く
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
//ヘッダーの高さを取得
var header = $('header').height();
//ヘッダーの高さを引く
var position = target.offset().top - header;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
高さを記入
$(function () {
var headerHight = 180; //ヘッダの高さ
$('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;
});
});