OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

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

最終更新日: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の数値はリンク先へ遷移直前に実行する機能の時間の長さによって調整します。あまり使うケースはないかもしれませんが、画面遷移にアプリのような動きの効果を付けれるかと思います。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram