jQueryコード
「#」から始まるリンクをクリックした際に発動。
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});スクロール位置がズレる
ヘッダーを固定している際などにスクロール位置がズレる時は、移動先の数値を調整する。
9行目の「var position = target.offset().top;」から修正する数値をひく。
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top - 100; //スクロール位置を調整する数値を引く。
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
