jQueryでスムーススクロール

アンカーリンクをクリックするとスムーススクロールするコード

$(function(){
let smoothScroll = function(href){
let target = $( href == '#' || href == '' ? 'html' : href );
let exclude = $('#header').outerHeight();
let position = target.offset().top - exclude;
if( href ) $('html, body').animate({scrollTop:position}, 800, 'swing');
return false;
}
smoothScroll(location.hash);
$('a[href^="#"]').on('click.smoothScroll',function(){
smoothScroll( $(this).attr('href') );
});
});


ロード時にURLにハッシュが付いている場合もスムーススクロールする

「let exclude =」はヘッダー固定要素等でスクロール量を調整したい場合に指定する。不要であれば0にする。

colorboxのinlineで無効化したい場合は「.off(‘.smoothScroll’)」を付ける。

$(function(){
$('.cb').off('.smoothScroll').colorbox({
inline: true,
width: '800px',
height: '600px',
});
});