jQueryでリンク先への遷移直前にいろんな機能をつけてみる
最終更新日: 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の数値はリンク先へ遷移直前に実行する機能の時間の長さによって調整します。あまり使うケースはないかもしれませんが、画面遷移にアプリのような動きの効果を付けれるかと思います。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories