WEBデザイナー18年目。桑島です。
ページ内リンク（アンカーリンク）についてです。
ページの中の所定の場所に移動したい場合
『アンカーリンク』という設定をします。
例えば…1ページでこの様な内容とした場合
<h2>タイトル／イベント開催のお知らせ</h2>
<ul>
<li><a href=”#info”>イベントのお知らせ</a></li>
<li><a href=”#day” >開催日時</a></li>
<li><a href=”#entry”>お申込み方法</a></li>
</ul>
<a id=”info” ></a>
<h3>イベントのお知らせ</h3>
<a id=”day” ></a>
<h3>開催日時</h3>
<a id=”entry” ></a>
<h3>お申込み方法</h3>
こんな感じのHTMLの書き方になります。
リンクに
#〇〇〇
リンクしたいところに
id=”〇〇〇”
とも言った感じです。
18年前からかわらず…お馴染みの書き方です。
しかし…時は流れ…色々なハプニングが…出てきます。
アンカーリンクが利かない…。
・jQuery Mobileの干渉…
・Android 端末はアンカーリンクが使えるは1回まで
↑誰だ？！その仕様考えたの。
本日の案件に至ってはPCで3回までしか、リンクに飛べない…と言う
怪現象を体験いたしました…。
そこで…1ページ内でアンカーリンクを複数使える方法を探ってみました！
そもそも…なぜAndroid 端末がアンカーリンクを認識しないのか？と言う疑問。
それは、そのページもう見てるから、リンクに飛ばさなくていいでしょー。
と言う、仕様があるんだそうです。
そうよねー。無駄に動きたくないよねー。わかる。わかる。
40過ぎたら時間は有限。動くならコスパ良くと思うわぁ…と
Androidの仕様に共感をしてみたりもしますが…
でも…動いてもらいたい！！そこで……
リンクにパラメーター！！！
<a href=”?a=4398894#info” id=”a01″>イベントのお知らせ</a>
<a href=”?a=7657542#day” id=”a02″>開催日時</a>
<a href=”?a=4398894#entry” id=”a03″>お申込み方法</a>
↑こういう感じになります。
#〇〇〇の前に「?a=」+「架空のパラメーター」を入れます。
パラメータをプラスするとリロードされます。
そのおかげでAndroid 端末でも、アンカーリンクを毎回認識してくるコトになります。
ちなみに、このリンクにパラメータ！！な方法は
RSSの読み込みをする際に、最新情報が反映されない～～。と言う時に
RSSをリロードさせる時も使えます。