Blog

ページリンク付きのアンカーリンクに対応したjQueryのスムーススクロール

2015.09.01Cat:jQuery デザイナー

ページ内のアンカーリンク(#link01のようにページ内のIDの場所を指定して移動させるリンク)のとき、

ページ内での移動であることがユーザーにわかりやすくなるため、

スムーススクロールを使う機会はとても多いと思います。

 

ただ、Wordpressなどでメニューを管理する場合で、

リンクにアンカーリンクをつけたい場合、

ページ外からのリンクも行う必要があるために、

以下のように、ページのリンク(URL)+アンカーリンクという形でリンク先を指定しなくてはならなくなることがあると思います。

 

この場合、通常よく使われる、以下の様なjQueryのコードでは、

同じページ内からアクセスしても、

スムーススクロールではなく元のリンクの動きになってしまいます。

 

そこで、今回はページヘのリンクとアンカーリングが両方付いている場合でも、

同じページ上のアンカーリンクであった場合に、

スムーススクロールとしての動きを実装するようにしたコードを考えてみました。

 

↓こちらがデモです

DEMO

 

jQueryコード

仕組みとしては、

リンク先のURLと現在のページのURLを比較して、

#より前のアドレスが同じであればスムーススクロールを実行するようにしています。

 

ポイントは、リンク先を.attr(“href”)ではなく、.prop(“href”)で取得して、現在のURLと比較している点です。

.attr(“href”)でリンク先を取得した場合は、hrefに設定されている値がそのまま取得されますが、

.prop(“href”)でリンク先を取得した場合は、絶対パスとしてURLを取得することができます。

 

hrefの指定は、相対パス、絶対パス、ルート相対パスなど、様々な指定方法があります。

そのままの値だとムラが出てきてしまう可能性があり、

hrefの値と現在のページのURLと比較する場合に支障が出てくることがあります。

 

しかし、.prop(“href”)を使って、必ず絶対パスとしてhrefの値を取得すれば、そのムラを防ぐことができます。

 

是非ご活用下さい。

 

参考にさせていただいたサイト

【JavaScript】a要素のhrefから絶対パスの取得 at softelメモ

JavaScript split 文字列を指定文字で抜き出す

 

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ