jQueryでリンク先への遷移直前にいろんな機能をつけてみる

jQuery2018.2.8

最終更新日：2018.2.9 Update!!

aタグ要素をクリックするとhrefの値に入ったリンク先URLにページ遷移されますが、その直前にアニメーションや動きを入れるなど、何らかの機能を追加したいケースなどにjQueryを使って対応してみたいと思います。

aタグのリンクを無効にする

まずそのためにはaタグのリンクを無効にする必要があります。href="javascript:void(0)"という方法もありますが、今回は下記のようにpreventDefault()を使ってリンクを無効にしています。

$("a").on('click',function(event){
   event.preventDefault();
});

このように一旦リンクを無効にするのですが、最終的にはリンク先へ遷移させるのでhrefの値は取得しておきます。そして、それに続けて遷移直前に実行させる内容を記述しておきます。続いて、取得したリンク先に遷移させる関数も用意しておきます。また、ページ内アンカーリンクなど画面が遷移しない場合、この関数内にはリンク先へ移動直後に実行する内容も記述することができます。最後にその関数をsetTimeoutで一定時間後に実行させることでリンク先へ遷移直前に機能が実行することができます。このコードをまとめると下記のようになります。

$("a").on('click',function(event){
   event.preventDefault();
   var linkUrl = $(this).attr('href');
 
   // ここにリンク先への遷移直前に実行する内容を記述
 
   function action() {
     location.href = linkUrl;
 
     // ここにリンク先への移動直後に実行する内容を記述
       （ページ内アンカーリンクなど画面が遷移しない場合に）
   }
   setTimeout(action,1000);
 });

setTimeoutの数値はリンク先へ遷移直前に実行する機能の時間の長さによって調整します。あまり使うケースはないかもしれませんが、画面遷移にアプリのような動きの効果を付けれるかと思います。