Let scroll to top button stick above footer/credits - html

Question

$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > $(window).height()) {
$('#scroll-top').fadeIn(300);
$('#scroll-top').css('display', 'flex');
} else {
$('#scroll-top').fadeOut(300);
}
});
//Click event to scroll to top
$('#scroll-top').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
//If Cookie-container is visable add bottom value
if ($("#cookie-notification-container").is(':visible')){
$("#scroll-top").css('bottom', 80 + 'px');
} else {
$("#scroll-top").css('bottom', '20px');}
});
/* ======================================================
► SCROLL-TOP
====================================================== */
#scroll-top{
display: none;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
border: none;
outline: none;
background: -webkit-linear-gradient(45deg, #ff91a2 0%,#ffabb7 100%);
background: <?= $headerBackgroundColor; ?>;
color: #fff;
cursor: pointer;
border-radius: 100%;
font-size: 18px;
box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.2);
width: 50px;
height: 50px;
overflow: hidden;
}
#scroll-top::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.0);
border-radius: 100%;
z-index: -1;
transform: scale(0);
transform-origin: center;
transition: transform 0.25s, border-radius 0.25s, background 0.25s;
}
#scroll-top:hover::after{
transform: scale(1);
border-radius: 100%;
transform-origin: center;
background: rgba(255,255,255,0.15);
}
#scroll-top svg{
transform: translateY(0%);
opacity: 1;
animation: fade-up 0.4s ease-out;
animation-delay: 0.2s;
animation-fill-mode: backwards;
fill:#ffffff;
}
#keyframes fade-up{
0%{transform: translateY(80%); opacity:0 ;}
80%{opacity:1 ;}
100%{transform: translateY(0%); opacity:1 ;}
}
/* ======================================================
► CREDITS
====================================================== */
#credits-container{
background: #2D2C2B;
min-height: 60px;
width: 100%;
display: flex;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: inherit;
}
#credits-container .wrapper #credits{
height: 100%;
width: 100%;
min-height: 60px;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}
#credits-container .wrapper #credits p{
color: rgba(255,255,255,0.6);
letter-spacing: 0.005em;
font-size: 0.95em;
line-height: 1.2;
display: block;
margin: 0em 0;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
text-align:center;
}
#media only screen and (max-width: 960px) {
#credits-container .wrapper #credits p{
font-size: 0.90em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 2000px;">
<button id="scroll-top" onclick="topFunction()">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 460" width="15" height="15">
<path d="M782.45,357.08l-340-340a60.07,60.07,0,0,0-84.86,0l-340,340a60,60,0,0,0,84.86,84.86L400,144.35,697.59,441.94a60,60,0,0,0,84.86-84.86Z" transform="translate(0 0.49)"/>
</svg>
</button>
</div>
<div id="credits-container">
<div class="wrapper">
<div id="credits">
<p>Created by Jhon Doh - ©<?= date("Y");?> Test Design.</p>
</div>
</div>
</div>
I have a scroll to top button that I would like to stick above the footer/credits (let it float 20 px above the credits/footer). When I apply sticky instead of fixed it does not work properly. I was wondering if someone could help me out. I am pretty new with this stuff. I have tried something similar with the cookie notification in the script(See below). But it is a bad temporary solution.