jQuery スムーススクロールの処理を一考 #jQuery

jQuery を使用したスムーススクロールを検索をしていると、
大体下記のソースコードがでてくる。


 $('a[href^="#"]').click(function(){
  var speed = 800,
      href = $(this).attr('href'),
      target = $(href === '#' || href === '' ? 'html' : href),
       position = target.offset().top;
   $('html, body').animate({scrollTop:position}, speed, 'swing');
   return false;
});

これを意味を分からずそのまま使うより知っておくべきポイントがあるとおもうので、
自分なりのメモとしてまとめます。

■ポイント１

a[href^="#"]

・jQueryのバージョンによっては#を""で囲まないと動作しないらしい。
・「^=」自体は「ビット排他的論理和演算子」。

・ここでは、ビット排他的論理和演算子「^=」によって文字列を指定しているわけではなく、セレクタの書き方の一つ。
　http://www.jquerystudy.info/reference/selectors/start.html

・指定した"値"が属性の値と前方一致する要素を選択する、というもの。
・href属性が "#" で始まる要素を取得することができます。

ただ上記の方法で書くより、
js動作する要素であることを明示する意味でも、対象リンクに class="js-●●"というクラスを設けて、それをセレクタとして指定してあげる方が、運用の更新の多いサイトでは分かりやすいかも。

■ポイント２

href === '' ? 'html' : href

上記の項目は三項演算子である。3つの項目（オペランド）を扱う演算子。
(条件) ? true値： false値 の形であり、条件を満たせばtrue、満たせてなければfalseになる。

href = $(this).attr('href'),
target = $(href === '#' || href === '' ? 'html' : href),

attr('href') でhrefの中身を取得したのち、取得した 変数href の値が空っぽの場合は html を返し、そうでない場合は、変数href の値を返す。

ただ、三項演算子の意味を知らないでコピペするよりは、わかりやすくif文で記載する方が良いはず。

//href の値が'#'だけの時、または、href の値が空っぽの場合 html を返し、そうでない場合は変数href の値を返す。
//つまり、クリックした要素の href 属性に指定された id の要素の上端、または、html 要素の上端をスクロール先として指定する。
target = $(href === '#' || href === '' ? 'html' : href)

　↓

//hrefが'#'だけ、ではない時、かつ、空っぽではない時（つまり、#付きリンクの時）
if (href !== '#' && href !== '') {
　（処理内容）
}

以下ソースまとめ

基の構文だと、hfefが空っぽでもoffset() を実施するため、コンソール上ではエラーがでるはず。
下記のように if 文にすることで、href の中身が空っぽの時は、処理が入らない為余計なエラーを出さなくなる。

  $('.js-ancher').on('click', function () { //クリックした際に動作
    var href = $(this).attr('href'); //クリックした対象要素の、ページ内リンク先を取得

    if (href !== '#' && href !== '') { //hrefが#だけではない、かつ、空っぽではない時（#付きリンクの時）
      var position = $(href).offset().top; // #リンクの移動先の位置を取得
      var scroll_speed = 700;
      $('html, body').animate({ scrollTop: position }, scroll_speed, 'swing'); //positionの位置までスクロール
    }
    return false;
  });

■参照

以下参照。

https://wemo.tech/147
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12158430097
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13158142488