制作のご相談はこちら
jQuery Bookletでアンカーリンクが動かない時の対処法

2014年08月25日

jQuery Bookletでアンカーリンクが動かない時の対処法

とあるクライアントさまから、
特集ページで本をめくるようなページを作りたいとのご要望がありまして、
jQueryプラグインを探していたところ、IEでもスマートフォンでも動くのでこちらのプラグインを使用しました。

jQuery Booklet

豊富なオプションでカスタマイズができます。
また一番の決め手はアンカーリンクの設置のオプションが付いている所です。
ハッシュタグを用いて特定のページへの遷移が可能です。

しかし、設置してみたはいいものの
アンカーリンクがうまく動かず、色々調べてみたところこちらの記事を見つけました。
jQuery Bookletでhash tag controlが動かない時の対処法:メモ

こちらの記事によると、奇数ページにアンカーリンクを設置すると症状がでるとの事。
試しに偶数ページを指定したら、うまく動くようになりました!

例えば、1ページ目に遷移させたい場合、

<a href="#/page/1">page1</a>

ではなく

<pre class="brush:xhtml;"><a href="#/page/2">page1</a></pre>

と記述します。

取り急ぎ不具合が修正出来たのでほっとしています。。