Weblasts

リンクをクリックしたときに移動先を判定して挙動を変えてみた

ページ内にはいろいろなリンクがあってページ内で移動するもの、同一サイト内の別ページに移動するもの、新しいタブを使って別ページに移動するものと様々です。
正しいかどうかはわかりませんが、クリックしたリンクの内容を把握して挙動を変える方法を書き残しておきます。

今回やりたいこと

とりあえず箇条書きにします

  • クリックしたリンクがページ内リンクだったらスムーススクロール
  • クリックしたリンクがタブを変えずに別ページに移動するものだったらアニメーション後に移動
  • クリックしたリンクが別タブで開くものだったら別タブでリンク先を開く

この3点をクリアしていきます。まずはドカッとコピペ用コードから
動きは適当にしてあるので必要に応じて書き換えてくれたらいいと思います。

jQuery

$(function() {
  $('a').on('click', function(e) { //イベントオブジェクトを使うのでeを入れる
    e.preventDefault(); //aタグが持つ元々の挙動をキャンセルして移動させなくする
    var href = $(this).attr('href');
    if (href.match(/^#/) || href=='') { //href属性の中身が#から始まる形か空だったら
      var target; //移動先を入れるための変数を作り
      if (href == '#' || href=='') { //取得したhrefの中身が「#だけ」か空だったときの処理
        target = $('html'); //移動先はページ上部にするためhtmlをjQueryオブジェクトにし変数へ
      } else { //それ以外の場合は
        target = $(href); //取得したhref属性の中身をjQueryオブジェクトにし変数へ
      }
      var posi = target.offset().top; //取得したhrefの上からの距離を取得して変数に入れる
      $('html,body').animate({
        'scrollTop': posi
      }, 500); //animateメソッドで移動
    } else {//#から始まるものと空以外なら
      if ($(this).attr('target')) {//target属性が取得できたら別タブで飛ばしたい
        window.open(href, '_blank');//リンクを別タブで開く
      } else {//target属性が取得できなかったら
        $('html').animate({
          opacity: 0
        }, 2000, function() {
          location.href = href;//アニメーション後にページ移動
        });
      }
    }
  });
});

行ごとできるだけかみ砕いていく

使ってるメソッドとかも含めていきます

2行目

 $('a').on('click', function(e) { 

普通にすべてのリンクを対象にしていくのでaタグをクリックしたときに処理を実行するようにします。 イベントオブジェクトを使ってリンクの機能をキャンセルしたいので()内に「e」を入れていきます。

参考サイト

いろいろのっていて分かりやすいです

jQuery イベントについてのまとめ

3行目

e.preventDefault();

イベントオブジェクトに対して元々の動作をキャンセルさせるための記述です
(ここではaタグの移動する機能をキャンセルしています)
本来リンクはクリックしたらどこかしらに移動するのでアニメーションなどの処理を挟めませんが、機能を止めてあげればアニメーションなどの処理ができます。

4~13行目

var href = $(this).attr('href');
if (href.match(/^#/) || href == '') {
  var target;
  if (href == '#' || href == '') {
    target = $('html');
  } else { 
    target = $(href);
  }
  var posi = target.offset().top;
  $('html,body').animate({
    'scrollTop': posi
  }, 500);
}

クリックしたリンクのhref属性を取得して変数に入れ内容によって動きを変えるためのif文になります この中の1行目で移動先を取得しています

if文の条件式に変な文字列が入っています。
「href.match(/^#/)」部分はhref属性の中身が「#」から始まっているかを調べるために正規表現でパターンマッチングをしています。
「||」は論理演算子でどちらかが成立したらという形になります。
「href == ”」は空っぽの場合もあるかもしれませんので保険で入れてあります。

簡単に書くとhref属性の中身が#から始まるものか、空っぽだったらtrueという条件式になっています。

もしtrueならページ内リンクの動きをしてあげればいいので、以前紹介したスムーススクロールとほとんど同じ処理をしています。

14行目以降

} else {
  if ($(this).attr('target')) {
    window.open(href, '_blank');
  } else {
    $('html').animate({
      opacity: 0
    }, 2000, function() {
      location.href = href;
    });
  }
}

href属性の中身が#から始まるものか、空っぽ以外であればこのelse側の処理が実行されます。(ページ間の移動の場合)
中身は単純なif文で、target属性が取得できるかどうかで処理を振り分けています。

window.open()メソッド

target属性が取得できた場合に使っているメソッドになります
機能を簡単に説明すると指定したURLを新しいタブ(ウインドウ)で開くことができます。

ここでは取得したhref属性の中に入っていたURLを別タブで開くため、一つ目の引数に「変数href」を二つ目の引数には新しいタブで開くために「’_blank’」を入れています。

target属性が取得できなかったらanimateメソッドを使ってアニメーションが終わった後にlocation.hrefを使ってページを遷移させています

location.href

locationオブジェクトのhrefプロパティを使うとURLの取得やページの遷移ができます。
ここではページ遷移させるために使っています。

以上おしまい

Recommend Post