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

JavaScript2020.02.26

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

この記事の目次

今回やりたいこと
行ごとできるだけかみ砕いていく
- window.open()メソッド
- location.href

今回やりたいこと

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

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

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

$(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;//アニメーション後にページ移動
        });
      }
    }
  });
});

$(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;//アニメーション後にページ移動

});

}

});

デモページ

リンク先を判定するサンプル。同一タブで開くリンクはアニメーション付きになっています

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

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

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

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

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

下のリンク先のページはいろいろのっていて分かりやすいです

参考サイト

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

イベントの設定onで設定(docum…

https://qiita.com/mikakane/items/9b69f0e519e42aa5bba5

e.preventDefault();

1	e.preventDefault();

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

参考サイト

JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識 - Qiita

preventDefault()って難しくないですか？何かを妨害しているということはわかるのですが、何を妨害しているのか、どういうときに指定するべきなのかといった部分が自分の中で曖昧で、最近「…

https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae

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);
}

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

参考サイト

【JavaScript入門】matchメソッドの使い方と正規表現の活用方法！ | 侍エンジニアブログ

この記事では「【JavaScript入門】matchメソッドの使い方と正規表現の活用方法！」について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。

https://www.sejuku.net/blog/25583

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