スマホでURLバーをスクロールアウトしたい。

2012/06/28

javascript

t f B! P L
スマホサイトでよくあるURLをスクロールアウトする機能があります。

これをjavascriptとjQueryで作ってみようと思います。
    (function($){
        $(window).load(function(){

            if ( document.URL.match(/#/) != '#' ){
                setTimeout(function(){window.scrollTo(0,1);},1);
            }

        });
    })(jQuery);
僕の考えではこの様な記述が良いかと思っています。
ウィンドウを1ピクセルスクロールすると言うのは必ずすることなのですが、それ以外にポイントになる部分が2箇所あります。

1.「$(window).load」で記述


 jQueryでJavascriptを記述する際には基本的に「$(document).ready」を使用することが多いかと思います。
$(document).readyはdomの完成とともに実行されるので、もしこちらに記述した場合画像が出来上がる前にスクロールをしてしまいます。
そうすると、大きな画像を持つページの場合に画像が表示前にスクロールを実行してしまい、スクロール出来ないなんて事が考えられますので、画面完成後に実行される$(window).loadを使います。

2.「if ( document.URL.match(/#/) != '#' ){~}」で分岐する


アンカーリンク対策のために分岐を設けます。

スクリプトに汎用性を持たせたいので、urlにアンカーリンクが入っていた場合はスクロールの実行をしないようにします。

これは$(document).readyの実行はアンカーリンクの繊維よりも後に動くからです。
もし分岐をしない場合は、一回アンカーリンクで動いた画面の後に上にスクロールするという不可解な動作をしてしまいます。
このような記述で多くのサイトで汎用的に機能を持たせることができるかと思います。
構造自体は簡単なのでjQueryを使用しないで同等の処理を持たせることができると思います。
ケースによってはスクロールの実行にsetTimeoutなどでラグを設ける必要がある可能性もあります。
理屈的には$(window).loadは画面の完成を必ず待つはずなのですが、行儀の悪いブラウザが無いわけではないと思います。
↑軽く血迷った 事を書いていますが、ちゃんと時間を取って実行を遅らせてありました。

このブログを検索

Amazon

QooQ