質問編集履歴

コード修正

2021/06/02 19:23

投稿

jal0994

スコア20

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,4 @@
-https://yuyauver98.me/footer-stop-btn/
+https://ss-complex.com/work_top_back_button/
 上記ページのフッター手前で止まるボタンについてですが、
@@ -44,34 +44,32 @@
 ＜既存のソースコード＞
-$(window).on("scroll", function() {
+scrollHeight = $(document).height(); //ドキュメントの高さ
-    scrollHeight = $(document).height();
+        scrollPosition = $(window).height() + $(window).scrollTop(); //現在地
-    scrollPosition = $(window).height() + $(window).scrollTop();
+        footHeight = $("footer").innerHeight(); //footerの高さ（＝止めたい位置）
-    footerHeight = $(".Footer").innerHeight();
+        if ( scrollHeight - scrollPosition  <= footHeight ) { //ドキュメントの高さと現在地の差がfooterの高さ以下になったら
-    if ( scrollHeight - scrollPosition  <= footerHeight ) {
+            $("#topBtn").css({
-      $(".CTA").css({
+                "position":"absolute", //pisitionをabsolute（親：wrapperからの絶対値）に変更
-        "position":"absolute",
+                "bottom": footHeight + 20 //下からfooterの高さ + 20px上げた位置に配置
-        "bottom": footerHeight
+            });
-      });
+        } else { //それ以外の場合は
-    } else {
+            $("#topBtn").css({
-      $(".CTA").css({
+                "position":"fixed", //固定表示
-        "position":"fixed",
+                "bottom": "20px" //下から20px上げた位置に
-        "bottom": "0px",
+            });
-      });
+        }
-    }
-  });
+    });