ラボ > Javascript関連:イベント関連、HTML

js ページ内リンクでヌルヌル移動してもらうヤツ

ページ内リンククリック時にジャンプさせるんじゃなくて、画面がスクロールして対象まで移動するってヤツ

作成日:2018-09-13, 更新日:2018-09-13

基本

var moveHash = function(tmpHash) {
  var offsetY = -10;
  var time = 500;
  var target = $(tmpHash);
  if (!target.length) return ;
  var targetY = target.offset().top+offsetY;
  $('html,body').animate({scrollTop: targetY}, time, 'swing');
  window.history.pushState(null, null, this.hash);
  return false;
}

// リンクタグクリック時
$(document).on('click', 'a[href^="#"]', function() {
  moveHash(this.hash);
});

// JSで対象にジャンプ:「window.location.hash = '#〇〇〇';」の代わり
moveHash('#〇〇〇');