javascript - 当页脚出现时重新定位滚动到顶部按钮(因此它永远不会重叠)

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

我想这就是您要找的。让我知道! CodePen

$(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>