ページトップに戻るボタンを常に右下に表示したいが、フッター上で止めたい

Question

jqueryを使用してページトップに戻るボタンを設置したいのですが、
常に右下に表示する方法は分かるのですが、
フッター上で止めたいのですが、どのようにすればよろしいでしょうか。

フッターの高さはautoです。

コードはこちらを参考にしようと思っております。
https://syncer.jp/jquery-to-top-button

処理的にはjqueryを使用すると思うのですが、どうでしょうか？

Answer 1

次の手順で可能かと思います。

1. スクロール値の取得
2. フッターの固定させたい位置を取得
3. 2 ＜ 1 になった時に ```

position:fixed ⇒ position:static

3. フッターの中にトップへ戻るボタンをマークアップする。

※ レスポンシブ対応させたい場合、リサイズ処理またはランドスケープ処理をいれる。

Answer 2

window.pageYOffsetとgetBoundingClientRectを使用することで，jQueryを使わずに目的を達成することができます．

window.addEventListener("DOMContentLoaded", function() {
var pageTopLink = document.getElementById("page-top");
var footer = document.getElementById("footer");
window.addEventListener("scroll", function() {
    var pageTopLinkPos = window.pageYOffset+ pageTopLink.getBoundingClientRect();
    var footerPos = window.pageYOffset+ footer.getBoundingClientRect();
    if (pageTopLinkPos >= footerPos) {
      // positionをabsoluteに設定する
    } else {
      // positionをfixedに設定する
    }
  });
});

Answer 3

ちょうど参考ページにはスクロール時に動的に表示変更する処理まで書いてあるので、「フッターが表示される位置までスクロールしたらpotisionをfixedからabsoluteに変えて『フッターの上の領域の右下』に配置変更する」という処理が妥当じゃないでしょうか。