Перемещение Позиционирование к верхней кнопке, когда появляется нижний колонтитул (поэтому он никогда не перекрывается)

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>