検索
2013
4
15
『スマホサイトでアンカーリンク効かない対策してやんよ!!!』(改良版編)
以前、スマホサイトでページ内アンカーリンクが効かない件についての投稿をしました。 『スマホサイトでアンカーリンク対策してやんよ!!!』(かなり力技編) ですが、この荒技故の欠点として・・・
- ①ページのコンテンツが増えたり減ったりの変動で移動すべきアンカーポイントが変わってしまう。
- ②ページ内でアンカーリンクポイントが複数あった場合にそのID、Classへ遷移するための記述を増やすのはいくない!!
- ③そもそもイチイチ座標を取得すんのがメンドクセー!!!
アドレスバー非表示スクリプトについておさらい
スマホ実機でページを開いた際にアドレスバーを非表示にしてコンテンツ表示領域を広くするスクリプトについて少しおさらい。記述その１
window.onload = function() {
scrollTo(0, 0);
}
尚、こちらの記述が利くのはiOS5以降となります。ios4とAndroidではscrollToのパラメーターが1以上（スクロールが初期位置から少しでも移動した状態）でないと記述が反応しない様です。
記述その２
window.onload = function() {
scrollTo(0, 1);
}
こちらはAndroid機種に対応した記述だがios4には利かないまま。
記述その３
window.onload = function() {
setTimeout(function() {
scrollTo(0, 1);
}, 100);
}
このsetTimeoutメソッドで0.1秒後に処理を行う事でios4にも対応する様です。
とりあえずこの記述でメジャーな現行の機種には対応できます。
スクリプト処理によるアンカーリンクの無効化
上記のスクリプトが作動することで#aaaコンテンツへのアンカーリンク#aaaが無効化されてしまいます。 下記のリンクを実機で確認してください。 デモページ これを直そうってお話でした・・・。①ページ内のアンカーポイントを自動で取得
前回は個別に指定していたアンカーリンクの指定IDポイントを自動で取得したいと思います。ハッシュIDの取得
function(){
var p = location.hash;
alert(p);
});
現在のページURLのアンカーID、つまりハッシュを取得します。URLにハッシュが含まれていればアラートにハッシュIDが出て、ハッシュが無ければ何もないアラートが出ます。
ハッシュの有無を確認
function(){
var p = location.hash;
var hashId = p.indexOf("#");
if(0 == hashId){
alert("ハッシュあるアルよ～");
}else{
alert("ハッシュないアルよ～");
}
});
これで現在のURLにハッシュが含まれていれば『ハッシュあるアルよ～』アラートが、含まれていなければ『ハッシュないアルよ～』のアラートが出ます。
取得ハッシュを各コンテンツIDへ代入
ハッシュの有無を識別したら、その値をコンテンツのアンカーポイントへ代入するための変数を作成する事で個別の指定していたアンカーポイントまでのパラメーターを自動で取得する
function(){
var p = location.hash;
var q = $(p).offset().top;
var hashId = p.indexOf("#");
if(0 == hashId){
alert("q");
}else{
alert("q");
}
});
これで前回の課題はクリアーできました。
②取得したアンカーポイントへリンクさせる
取得したアンカーポイントへリンクさせる
あとは上記で取得したパラメーターの数値のピクセル分スクロールさせる
$(document).ready(function(){
var p = location.hash;
var q = $(p).offset().top;
var hashId = p.indexOf("#");
if(0 == hashId){
$('html,body').animate({ scrollTop: q }, 'slow');
return false;
}
});
これで遷移したページURLにハッシュが含まれていた場合、そのハッシュIDと同名のIDコンテンツまでのパラメーター分スクロールさせるスクリプトが起動します。
#aaaコンテンツへ
#bbbコンテンツへ
#cccコンテンツへ
#dddコンテンツへ
これでどうでしょうか？
このスクリプトとアドレスバーの非表示用のスクリプトを組み合わせればプラグインの完成です(笑
window.onload = function() {
setTimeout(function() {
scrollTo(0, 1);
}, 100);
var p = location.hash;
var q = $(p).offset().top;
var hashId = p.indexOf("#");
if(0 == hashId){
$('html,body').animate({ scrollTop: q }, 'slow');
return false;
}
}
