読者です 読者をやめる 読者になる 読者になる

MyController

WEB業界素人の僕がまた見返しそうなことのメモです。

【JS】固定ヘッダ対応のスムーズスクロール

JavaScript

 

結構汎用的に使えるし使うので。

 

// スムーズスクロール
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
 // スクロールの速度
 var speed = 400; // ミリ秒
 // アンカーの値取得
 var href= $(this).attr("href");
 // 移動先を取得
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を数値で取得
 var headerHight = 66;//固定ヘッダの高さ ないなら0にするか削除
 var position = target.offset().top-headerHight;
 // スムーススクロール
 $('body,html').animate({scrollTop:position}, speed, 'swing');
 return false;
});