Weblasts

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

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

今回やりたいこと

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

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

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

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

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

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

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

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

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

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

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

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

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

window.open()メソッド

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

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

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

location.href

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

以上おしまい