複数の場所にスムーススクロールで移動させる

複数の場所にスムーススクロールで移動させたい場合

以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。

 $('a[href^="#"]')

対象を限定した場合

$('a.scroll[href^="#"]')

位置の取得

offset()は、親要素関係なく、documentから見た座標を取得します。
さらに複数回使う要素は変数に置き換えた方が効率的なので記述するパターンも覚えておきましょう。

以下はターゲット要素より、50px上にスクロールするサンプルです。

var position = target.offset().top - 50;

正規表現を抜いたシンプルなパターン

$(function(){
$('a.scroll[href^="#"]').on('click',function() {
// 移動先を取得
var target = $(this).attr('href');
 // 移動先を数値で取得
var position = $(target).offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position});
   });
});

正規表現を加えたパターン

$(function(){

$('a.scroll[href^="#"]').on('click',function(){
var a= $(this).attr('href');

//正規表現を加える
var target = $(a == "#" || a == "" ? 'html' : a);

// 移動先を数値で取得
var position = $(target).offset().top;
$('body,html').animate({scrollTop:position});
});

});

この部分ですが、この時点で変数aにはクリックしたa要素のhref属性の値が収納されています。

$(a == "#"  ? 'html' : a);

？は三項演算子と言い、if文を１行にまとめた形になります。

例：A ? B : C
条件Aの時はB、それ以外の時はCという形になります。

今回の形は

if(a == "#") { 
   'html' 
} else {
   a
}

これと同じということになります。

変数aの値が#のみの場合、html要素（一番上）に行く。
それ以外の場合は変数aの要素に行く。