あくまで自分用の覚え書きなので文章とか適当です...

メモ WordPressはTable of Contentなどのプラグインで生成されるリンクに効かないことがあるのでその場合は下記を使う方が良いかも

1ページの場合

LPなどはCSSのみで実現可能

CSS

html{
	scroll-behavior: smooth;
}
[id] {
	scroll-margin-top: 150px; //←ヘッダの高さを指定
}

複数ページで別ページのアンカーリンクにも飛ばすことがある場合

別ページへ遷移後にスムーススクロールアニメーションが発動しないように、jQueryでアンカーリンクをクリックしたときにhtml要素にscroll-behavior: smoothを適用する。

CSS

[id] {
	scroll-margin-top: 150px; //←ヘッダの高さを指定
}

jQuery

$('a[href*="#"]').on('click', function(){
	$('html').css('scroll-behavior', 'smooth');
});
スポンサーリンク