ページ内リンクへのスムーススクロール
通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。
#がついている全てにスムーススクロールさせる場合
$(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}, 300, 'swing'); return false; }); });
この部分ですが、
$(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}, speed, 'swing'); return false; }); });