スマホ対応のアンカーリンク  | WEBデザイナー 桑島 美夢

スマホ対応のアンカーリンク 

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をリロードさせる時も使えます。