お知恵をお貸しください。スマホ閲覧時、フッター手前でボタンが止まる処理について

Question

https://ss-complex.com/work_top_back_button/
上記ページのフッター手前で止まるボタンについてですが、
コードを使用すると、PCであれば問題ない挙動なのですが、スマホで下にスクロールしていくとフッターの要素と少し被った状態に一瞬なってからフッターの上に表示されるという不自然な動きになります。

原因としてはブラウザのアドレスバーが表示されている影響で不自然な動きになります。

具体的な原因としては下にスクロールしていくと、ブラウザのアドレスバーは非表示になるのですが、$(window).height() で取得している高さが、アドレスバーが表示されている状態の高さを取得しているため
フッターにボタンが少し被った状態に一瞬なります。

なので、下にスクロールしていくときにアドレスバーが非表示になるので、アドレスバーが非表示の状態の高さを$(window).height()で取得できれば問題なく表示されます。

ただ、逆にフッター部分までスクロール後上にスクロールする時は、アドレスバーが表示されるので上に戻る時はアドレスバーが表示された状態の高さを取得できるようにしたいとゆう状況です。

上述の処置をJQueryで一番簡単にできる方法はありますでしょうか。
お知恵をお貸しいただけますと幸いです。

宜しくお願いいたします。

＜既存のソースコード＞
scrollHeight = $(document).height(); //ドキュメントの高さ
scrollPosition = $(window).height() + $(window).scrollTop(); //現在地
footHeight = $("footer").innerHeight(); //footerの高さ（＝止めたい位置）
if ( scrollHeight - scrollPosition <= footHeight ) { //ドキュメントの高さと現在地の差がfooterの高さ以下になったら
$("#topBtn").css({
"position":"absolute", //pisitionをabsolute（親：wrapperからの絶対値）に変更
"bottom": footHeight + 20 //下からfooterの高さ + 20px上げた位置に配置
});
} else { //それ以外の場合は
$("#topBtn").css({
"position":"fixed", //固定表示
"bottom": "20px" //下から20px上げた位置に
});
}
});

Answer 1

$(window).height() の代わりに window.innerHeight を使ってみてはどうでしょうか？

Comments

[jal0994]

ご回答ありがとうございます。
window.innerHeightやouterHeightなどでも試したのですが、アドレスバーが表示されている高さを取得します。
併せて、今回は下記のとおり下にスクロールする時と上にスクロールする時で、アドレスバー表示有無に応じて、取得する高さを区別できるコードを実装したいと考えております。

ーーーーーーーーーーーーーーー
なので、下にスクロールしていくときにアドレスバーが非表示になるので、アドレスバーが非表示の状態の高さを$(window).height()で取得できれば問題なく表示されます。

ただ、逆にフッター部分までスクロール後上にスクロールする時は、アドレスバーが表示されるので上に戻る時はアドレスバーが表示された状態の高さを取得できるようにしたいとゆう状況です。
ーーーーーーーーーーーーーーー

[lohn]

本来window.innerHeightはアドレスバー表示の有無でサイズが変わるのですが、その値を実際に取得・デバッグ用に表示等はしてみましたか？
また変わらないという場合、その環境も併せてご記載ください。

[jal0994]

ご回答ありがとうございます。

実際に実機で確認しても取得できておらず、フッターの要素と少し被った状態に一瞬なってからフッターの上に表示されます。

検証した端末はiPhone7とAndoroido9のAQUOSです。

[lohn]

うーん、それは「値はわざわざ見ていないが、動作は同じだった」という意味でしょうか。

[jal0994]

ご回答ありがとうございます。

値も見ております。そうのうえで動作も同じということです。

[lohn]

アドレスバー表示の有無でのサイズではなく、別の問題かなと思いましたが、
window.innerHeightで値が変わらない、とおっしゃるなら諦められたほうが良いかなと思います。
端末固有のバグを踏んでいるかもしれませんし。