ページ内リンクでの、スムーススクロールとページヘッダー分相殺
トップページの真ん中へリンク!
https://ilovewig-salon.com/#company
ページ内リンク!
function add_footer_script(){ ?>
<!-- footerに書きたいコード -->
<script>
jQuery(function($){
//この中は$マークが使える
var headerHeight = $('.site-header').outerHeight();
var urlHash = location.hash;
if(urlHash) {
$('body,html').stop().scrollTop(0);
setTimeout(function(){
var target = $(urlHash);
var position = target.offset().top - headerHeight;
$('body,html').stop().animate({scrollTop:position}, 500);
}, 100);
}
$('a[href^="#"]').click(function() {
var href= $(this).attr("href");
var target = $(href);
var position = target.offset().top - headerHeight;
$('body,html').stop().animate({scrollTop:position}, 500);
});
});
</script>
<?php }
ページを全て読み込んでから、スクロールを始めないといけないため 100ミリ秒 遅延させています。
500はスクロースにかける秒数です。
このページはヘッダー固定していないので相殺されて居ないですが。。。