当页脚出现时重新定位滚动到顶部按钮（所以它永远不会重叠）

Question

我目前在我的网站上实现了一个“单击以向上滚动”按钮，该按钮本身工作正常，但我唯一的问题是，当它到达页脚时，它会与它重叠。我希望按钮不与项目重叠，并在设定距离处停在页脚顶部。这是我当前的按钮 CSS：.back-to-top {position: fixed;right: 25px;display: none;z-index: 99;    }这是我的 JS：$(document).ready(function(){$(window).scroll(function () {        if ($(this).scrollTop() > 50) {            $('#back-to-top').fadeIn();        } else {            $('#back-to-top').fadeOut();        }    });    // scroll body to 0px on click    $('#back-to-top').click(function () {        $('body,html').animate({            scrollTop: 0        }, 400);        return false;    }); });这是在代码笔中：https ://codepen.io/Darlton29/pen/ZEbyNXe我当然可以调整填充/边距，使其完全避开页脚，但这不是我想要的解决方案，就好像我要扩展页脚一样，我的按钮会在页面上太远。如您所见，向上滚动按钮与页脚重叠。非常感谢任何帮助。谢谢。编辑：页脚 CSS.footer {  position: absolute;  width: 100%;       height: 4rem;   /* Set the fixed height of the footer here */  line-height: 4rem; /* Vertically center the text there */  background-color:#292929;  text-align: right;  color: #fff;   padding-right: 2rem;  bottom: 0;      }

Answer 1

我想这就是你要找的。让我知道！代码笔

$(document).ready(function(){

// Should cache elements here for continuous access

const footer = $(".footer");

const scrollBtn = $("#back-to-top"); 

const padding = 25; // So you can change this is one value

  $(window).scroll(function () {

    

    // Where we're gonna set the button's height

    var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());

    // Check to see if we're within the footer range

    if ( distanceFromBottom <= footer.height() ) {

        console.log(distanceFromBottom);

        scrollBtn.css("bottom", (footer.height() - distanceFromBottom) + padding);

      } else {

        scrollBtn.css("bottom", padding);

      }

      if ($(this).scrollTop() > 50) {

        $('#back-to-top').fadeIn();

      } else {

        $('#back-to-top').fadeOut();

      }

    });

    // scroll body to 0px on click

    $('#back-to-top').click(function () {

      $('body,html').animate({

        scrollTop: 0

      }, 400);

      return false;

    });

});

html {

  position: relative;

  min-height: 100%;

}

body {

  background-color: #3498db;

  color: #ecf0f1;

}

.back-to-top {

    position: fixed;

    bottom: 25px;

    right: 25px;

    display: none;

    z-index: 99;

}

.footer {

  position: absolute;

  width: 100%;     

  height: 4rem;   /* Set the fixed height of the footer here */

  line-height: 4rem; /* Vertically center the text there */

  background-color:#292929;

  text-align: right;

  color: #fff; 

  padding-right: 2rem;

  bottom: 0;    

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="row justify-content-center text-center">

    <div class="col-8 my-5">

      <p class="h5">Hello!</p>

      <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">

      <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">

      <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">

      <img src="http://via.placeholder.com/900x300" class="img-fluid rounded alt="">      

    </div>

  </div>

</div>

<a id="back-to-top" href="#" class="btn btn-light btn-lg back-to-top" role="button"><i class="fas fa-chevron-up"></i></a>

                                                                    <footer class="footer">Copyright </footer>