A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

JavaScriptによるページ内の移動とその後の処理を同期させる

      2014/11/18

Javascriptでスクロール位置を画面最上部にする場合はwindow.scroll(0,0);
で処理ができるのですが、移動完了している事が必須となる処理を続けて行うとそれぞれが非同期で実行される為、思った様な結果にならない場合があります。

※この問題に当たったのはわりと古い2.3系のAndroidだったので、新しい端末なら問題無いのかもしれません。

移動の完了を待って次の処理を行う

簡易に書くとこんな感じなのです。‘body’, ‘html’を両方指定する事でブラウザ依存を排除します。

ですが、これだと問題がありまして、画面内の移動は正常に行われますが、$(‘body’, ‘html’) と設定してるため、移動完了後の処理が2回(body,htmlそれぞれで)実行されます。

対象の要素をhtmlまたはbodyの何れかで行うかを判定して処理を行えばよいのですが、簡易に行う方法がないようでして、実際に移動させてみて効果があるかを判定する処理をいれる必要があるとの事の様です。

判定処理は参考サイトからの転載です。

参考サイト

こちら参考にさせて頂きました!

jQuery 1.9 で $.browser が使えなくなってしまった対策

 - jquery

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

jquery_icon
JavaScript(jquery)で画像など全部の読み込みが完了した時に処理を行う

jqueryで …

jquery_icon
アクティブ領域のゲージの背景色に色がつくスライダー その2

先日のエントリでjQuery UIを使って”アクティブ領域の背景色に …

jquery_icon
jqueryでフォームデータを扱う簡単なサンプルコード

jqueryでフォームデータを扱う時の簡単なサンプルです。 テキストボックスの値 …

jpPlot_icon
jqPlot+Jqueryでグラフを描画してみる

コンテンツとしてグラフを表示する要件があったので、いくつか調査し一番良さそうだっ …

jQuery_UI_icon
jQuery UIのスライダーのデザインを調整する

スライダーを<input type=”range” …

jpPlot_icon
jqPlot+Jqueryでグラフを描画してみる その2

前回のエントリjqPlot+Jqueryでグラフを描画してみるの続きです。 今回 …