ページ内リンクへのスムーススクロール

jQuery

通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。

#がついている全てにスムーススクロールさせる場合

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
  
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top;
      // スムーススクロール
      $('body,html').animate({scrollTop:position});
   });
});

この部分ですが、

$(href == "#" || href == "" ? 'html' : href);


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

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

今回の形は

if(href == "#" || href == "") { 
   'html' 
} else {
   href
}

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

「||」は論理演算子のor なので、

日本語に直せば、「hrefが”#”または空のときは”html要素”、そうでないときは変数「href」に代入されている値となります。



特定のリンクを除外する場合
$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').not('a.notscroll').on('click',function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
    // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 50;
      // スムーススクロール
      $('body,html').animate({scrollTop:position});
   });
});

コメント

タイトルとURLをコピーしました