フッター手前で止まる「Topに戻る」ボタン

「Topに戻る」ボタン（以降、ボタンと呼ぶ）をフッターの上で止めたい問題。
講座の修了までに解決が出来ず、フッターに被らない位置に置きましょうか…で終っていた因縁のボタン。
出来ないままではダメだろう、と一念発起！
2日かかって解決に至った_(:3」∠)_

😥上手くいかなかった方法

【jQuery】スクロールすると出てきてフッター直前で止まるフローティングボタンの実装 | ビジネスとIT活用に役立つ情報（株式会社アーティス）

１．上手く行かなかった原因を考える

検証①　potision:relativeの場所を変える

書いてある通りbodyにつけるのだろうけど、bodyは親の親くらいになっていたので変えてみた。動きに変化はなかった。

検証②　不等号の向きを変えてみる

どの位置にボタンがあってもpositionがfixedからabsoluteに変わらないことに気がつき、if文が機能しているのかを疑った。
不等号の向きを変えたところ、ボタンが全く動かなくなった。if文は機能しているようだ。

検証③　あらゆる高さを確認

consol.logを使って、高さを確認した。
「ページ全体の高さ」から「ページの一番上からスクロールされた距離」を引いた値が、「フッターの高さ」より小さくなることがないことが分かった。
いくらif文で「フッターの高さ」より小さくなった場合、と指定しても動かない訳だ。

2．解決できない中で学んだこと

consol.log()で高さを出すことが出来るようになった。

---

🔰ページ全体の高さを確認する方法🔰
【宣言する場合】
const scrollHeight = $(document).height();
consol.log(scrollHeight);
【宣言しない場合】
consol.log($(document).height());

---

😄上手くいった方法

【jQuery】フッター手前で止まるページトップへ戻るボタンの作り方

フロートボタンをクリックした時に、なめらかにトップに戻る動きの設定も載っていた。勉強になった。

😑何が違うのか

上手くいった方法と上手くいかなかった方法を比べてみた。

１．if文を比べる

条件式は同じだった。

↓上手くいかなかった方のif文

if ( scrollHeight - scrollPosition  <= footHeight ) {
            $(".float-button__wrap").css({
                "position":"absolute",
                "bottom": 10  + footHeight,
            });
        } else {
            $(".float-button__wrap").css({
                "position":"fixed",
                "bottom": "10px",
            });

↓上手くいった方のif文

if (scrollHeight - scrollPosition <= footHeight) {
      $("#page-top").css({
        position: "absolute",
        bottom: footHeight,
      });
    } else {
      $("#page-top").css({
        position: "fixed",
        bottom: "0",
      });
    }

---

🔰constって何？変数と定数🔰
letは変数を宣言。
constは定数を宣言。
変数と定数については下記リンク先に分かりやすい説明があった。

https://wa3.i-3-i.info/word17200.html

---

２．高さの取り方を比べる

ここも同じだった。

↓上手くいかなかった方

$(function() {
　～省略～
    $(window).on("scroll", function() {
　　const scrollHeight = $(document).height();/*ページ全体の高さ*/
　　const scrollPosition = $(window).height() + $(window).scrollTop();/*ページの一番上からスクロールされた距離*/
　　const footHeight = $("footer").height();/*フッターの高さ*/
　～省略～

↓上手く行った方

$(window).on("scroll", function () {
    scrollHeight = $(document).height();
    scrollPosition = $(window).height() + $(window).scrollTop();
    footHeight = $("footer").innerHeight();
～省略～

---

🔰heightとinnerHeight🔰
heightは要素そのもの高さでpaddingは含まない。
innerHeightはborderの内側、paddingを含む。

---

😦抜けていたかもしれない

.on("scroll", function()を最初は指定出来ていなかったかもしれない。
noteに書きながら気がついた。
if文も、高さの取得の方法も同じであれば、同じように動くはず。
.on("scroll", function()って何だろう、と思い検索したのは上手くいった方法を試していた時だった。
恐らく、上手くいかなかった方法を試していたとき、構文をミスしたのだろう。