how to position a scroll_to_top button - html

Question

in the example below how to keep gotop inside story - i.e. bottom right of the middle div
and keep its show/hide functionality
the three divs - top, story and footer - are not of predictive width and height
I tried various position and margin params - without success
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:fixed;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>

Answer 1

Use sticky position:
$(document).on('scroll', function() {
let x = $(this).scrollTop();
if (x > 25) {
$('.gotop').show();
} else {
$('.gotop').hide()
}
});
$('.gotop').on('click', function() {
$(document).scrollTop(0);
});
.container {
width: 50%;
margin: 0 auto;
background: silver;
text-align: center;
}
.top {
padding: 25px;
background: gold;
}
.story {
position: relative;
padding: 25px;
min-height: 150vh;
/* I need flexbox to push the button to bottom*/
display:flex;
flex-direction:column;
}
.footer {
padding: 25px;
background: gold;
}
.gotop {
display: none;
position: sticky;
margin-top:auto; /* push to bottom */
text-align:right; /* right align */
z-index: 99;
right: 14px;
bottom: 14px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>

Answer 2

In the following implementation, I have taken some liberty to change minor css , replace jquery with js by introducing Intersection Observer which will only make the gotop element visible when our footer starts getting visible. Ofcourse you can use both jquery and js simultaneously but since I don't have experience with former, I used js only.
The benefit is that it's not dependent on any hardcoded values to control gotop visibility.
let footer = document.querySelector('.footer');
let gotop = document.querySelector('.gotop');
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
gotop.style.opacity = '1';
gotop.style.pointerEvents = 'auto';
}
else{
gotop.style.opacity = '0';
gotop.style.pointerEvents = 'none';
}
})
})
observer.observe(footer);
gotop.addEventListener('click',()=>window.scrollTo({top:true}));
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
opacity:0;
pointer-events:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
transition:all 0.2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>

Answer 3

You only need to change position:fixed; to position:absolute; for your .gotop div. Since it is positioned inside a position: relative div then it will be inside of it.
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>