A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

jquery

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

投稿日:2014年11月17日 更新日:

Javascriptでスクロール位置を画面最上部にする場合はwindow.scroll(0,0);
で処理ができるのですが、移動完了している事が必須となる処理を続けて行うとそれぞれが非同期で実行される為、思った様な結果にならない場合があります。
※この問題に当たったのはわりと古い2.3系のAndroidだったので、新しい端末なら問題無いのかもしれません。

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

$('body', 'html').animate({
    scrollTop:0;},
    { complete: function(){
        //移動完了後の処理
    }
});

簡易に書くとこんな感じなのです。‘body’, ‘html’を両方指定する事でブラウザ依存を排除します。
ですが、これだと問題がありまして、画面内の移動は正常に行われますが、$(‘body’, ‘html’) と設定してるため、移動完了後の処理が2回(body,htmlそれぞれで)実行されます。
対象の要素をhtmlまたはbodyの何れかで行うかを判定して処理を行えばよいのですが、簡易に行う方法がないようでして、実際に移動させてみて効果があるかを判定する処理をいれる必要があるとの事の様です。
判定処理は参考サイトからの転載です。
https://gist.github.com/akifumi-kamata/d43e53699fae19fa90fa

参考サイト

こちら参考にさせて頂きました!
jQuery 1.9 で $.browser が使えなくなってしまった対策

-jquery
-

執筆者:

関連記事

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

前回のエントリjqPlot+Jqueryでグラフを描画してみるの続きです。 今回はドーナツグラフを描いてみます。 サンプルコード jqPlot本体のダウンロードなどは前回エントリを参照いただけばと。 …

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

コンテンツとしてグラフを表示する要件があったので、いくつか調査し一番良さそうだったのがjqplot。 Jquery(JavaScript)ベースなので、スマホへの対応も意識せずにできます。 jqPlo …

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

スライダーをで指定すると こんな感じになるのですが、思った通りにデザインが適用できず苦戦したのでメモ。 ゴール ・バーのアク …

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

jqueryでフォームデータを扱う時の簡単なサンプルです。 テキストボックスの値を取得して表示 https://gist.github.com/akifumi-kamata/03ea71607cd9c …

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

$(function(){ // 処理 }); jqueryでコードを書く際によく見る記述ですが、この記述の場合にはhtml(document)の読み込みが完了した時点で処理が実行されます。 つまり、 …