質問: $ti.offset(); $("html,body").animate({scrollTop:position.top},300,"swing"); //この後に $ti の要素内に結果の内容を出力する処理を書きます(省略) } .fail(function(){ //エラー処理(省略) } ``` PC/iOSでは`$("html,body").animate({scrollTop:position.top},300,"swing");`の箇所で 該当の要素までスクロールを行うのですが、Android版Chromeでのみ正しく動作致しません。 ### 試したこと **●正しいposition.topが取得できているか確認する** まず、該当箇所まで正しく処理ができているか確認するため、 `$("html,body").animate({scrollTop:position.top},300,"swing");`の直前に consoleへの出力処理`console.log('position.top:'+position.top);`を書きました。 するとその地点では`position.top`に要素の位置が正しく格納されていました。 **●スムーススクロールが動作しているか確認する** スムーススクロール自体がAndroidに対応できない可能性も考えましたが、 同ツール内に同様の処理で「画面上部に戻る」ボタンを用意しており、 それが動作するため問題ないように思います。 **●様々な機種でデバッグを行う** 複数のAndroid端末を用いて(OSはAndroid 6、Android 5等)試しましたが、 すべての端末において動作できませんでした。 また、PCに実機をデバッグモードで接続し、 コンソールを確認しましたが、特にエラーは表示されませんでした。 ### 懸念点として ひとつ懸念点としては、今回の処理が`.on('click',hoge)`などの、 ユーザーによる操作から動作していない(※)のが、ひとつの原因なのかもしれないと考えています。 例えばiOSではHTML5のAudio要素について、ユーザーからの操作がない限り、 音声を鳴らすことが出来ませんが、それと似た原因なのかもしれないな......と。 しかし様々な資料等を調べてみましたが、その様な記述や、解決法などを見つけることはできませんでした。 (※今回のツールの場合、バーコードリーダーの機種を問わず処理できるよう、 数値の入力開始と共に`setTimeout`で監視を行っています。 入力される度にタイマーをリセットし、1秒間入力が無ければ前述の処理を開始するというイメージです。) 的外れな考察であればすみません。 私の力不足で大変恐縮なのですが、原因の心当たりや解決法など、なんでも結構です。 お知恵を拝借できますと、大変助かります。宜しくお願い致します。
回答: `html,body`に`height: 100%;`が指定されているとAndroidやChromeでは動かないことがあるとの情報がいくつか出てきましたが、どうでしょう? もし指定されていたならば、`animate`する前に`$('html,body').css({height: 'auto'});`を記述してみてください。 【参考】 AndroidのみscrollTopが動かない chromeでscrollTop()が効かない、取得できない現象に遭遇。 【追記】 `.animate()`完了時の`scrollTop`値を取得 ``` $("html,body").animate({scrollTop:position.top},300,"swing",function(){ console.log($(this).scrollTop()); }); ```