jQueryでスムーススクロール

TIPS 0 Takuya Kobayashi

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

$(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',
  });
});

--
以上