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

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 accessconst footer = $(".footer");const scrollBtn = $("#back-to-top");&nbsp;const padding = 25; // So you can change this is one value&nbsp; $(window).scroll(function () {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Where we're gonna set the button's height&nbsp; &nbsp; var distanceFromBottom = Math.floor($(document).height() - $(document).scrollTop() - $(window).height());&nbsp; &nbsp; // Check to see if we're within the footer range&nbsp; &nbsp; if ( distanceFromBottom <= footer.height() ) {&nbsp; &nbsp; &nbsp; &nbsp; console.log(distanceFromBottom);&nbsp; &nbsp; &nbsp; &nbsp; scrollBtn.css("bottom", (footer.height() - distanceFromBottom) + padding);&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; scrollBtn.css("bottom", padding);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; if ($(this).scrollTop() > 50) {&nbsp; &nbsp; &nbsp; &nbsp; $('#back-to-top').fadeIn();&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $('#back-to-top').fadeOut();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // scroll body to 0px on click&nbsp; &nbsp; $('#back-to-top').click(function () {&nbsp; &nbsp; &nbsp; $('body,html').animate({&nbsp; &nbsp; &nbsp; &nbsp; scrollTop: 0&nbsp; &nbsp; &nbsp; }, 400);&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; });});html {&nbsp; position: relative;&nbsp; min-height: 100%;}body {&nbsp; background-color: #3498db;&nbsp; color: #ecf0f1;}.back-to-top {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; bottom: 25px;&nbsp; &nbsp; right: 25px;&nbsp; &nbsp; display: none;&nbsp; &nbsp; z-index: 99;}.footer {&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; &nbsp; &nbsp;&nbsp; height: 4rem;&nbsp; &nbsp;/* Set the fixed height of the footer here */&nbsp; line-height: 4rem; /* Vertically center the text there */&nbsp; background-color:#292929;&nbsp; text-align: right;&nbsp; color: #fff;&nbsp;&nbsp; padding-right: 2rem;&nbsp; bottom: 0;&nbsp; &nbsp;&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="row justify-content-center text-center">&nbsp; &nbsp; <div class="col-8 my-5">&nbsp; &nbsp; &nbsp; <p class="h5">Hello!</p>&nbsp; &nbsp; &nbsp; <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">&nbsp; &nbsp; &nbsp; <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">&nbsp; &nbsp; &nbsp; <img src="http://via.placeholder.com/900x300" class="img-fluid rounded mb-3" alt="">&nbsp; &nbsp; &nbsp; <img src="http://via.placeholder.com/900x300" class="img-fluid rounded alt="">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; </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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <footer class="footer">Copyright </footer>