『スマホサイトでアンカーリンク対策してやんよ!!!』(かなり力技編)

スマホサイトを制作する際にiPhone設定でアドレスバーを非表示にするJavaScriptを使用すると外部からのアンカーリンクが効かない事態 （※正しくはアンカーされたあとに画面トップまで引き戻されてしまう現象） 対処としては該当のJSを使わなければ問題ないのだが、JSの記述自体がライブラリやインクルードファイル内に導入してあって容易にいじれない場合の応急処置的な対処法を無理やり作成した。

アドレスバー非表示の記述

$(window).bind("load", function(){
	setTimeout(function(){
		window.scrollTo(0,1);
	},1);
});

下記リンクページの各コンテナにそれぞれ#aaa、#bbb、#ccc、#dddと付けています。スマホ実機で各IDへのアンカーリンクへ飛んでみてください。 コンテンツ001へリンク(#aaa) コンテンツ002へリンク(#bbb) コンテンツ003へリンク(#ccc) コンテンツ004へリンク(#ddd) 恐らく上手くアンカーポジションまでリンクできませんよね？ 上記のスクリプトが記述されているのでページを読み込んだ後でスクリプトが反応するため、アンカーリンクが無効化されてしまう。

手順①　アンカー先の座標を取得する

$(function(){
    var offset = $( "アンカー先ID").offset();
    alert( offset.top + " : " + offset.left );
});

これでアンカー先にコンテンツ002を指定して座標を取得してみます。 コンテンツ002の座標を取得 アラートに表示された数値の左が要素開始からのコンテンツ002までのピクセル数となります。 座標を取得後はこのソースは使わないので削除もしくは非表示に。

手順②　ページ遷移時の処理

$(window).bind("load", function(){
    if(location.hash == "アンカー先ID"){
        $('html,body').animate({ scrollTop: 取得したアンカー先の座標 }, 'fast');
    }
});

前項目で取得した座標を上記スクリプトへ記述することでコンテンツ002(#bbb)へのアンカーリンクが通る コンテンツ002へリンク(#bbb) これで外部リンクのURLとハッシュIDがページURLとアンカー先IDと一致したら指定されたアンカー先の座標までページがスクロールしてくれる。
というか無理矢理させる ※当然ながらアドレスバー非表示設定のjsより下に記述しないと意味ないのでご注意。 アンカー先が多数ある場合は各IDの座標を取得し、else if文で各アンカーIDと座標を追加していけばＯＫ。 かなり特殊な条件で対処法な分、処理も荒業ではあるが、とりあえず動いてくれればよしとしましょう!!

追記

改良版作成しました!! 『スマホサイトでアンカーリンク効かない対策してやんよ!!!』(改良版編)