I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue.
Here is the layout of the page:
<nav>
navbar
</nav>
<div>
caroussel
</div>
<div>
some images
</div>
<!--Back to top button-->
<button onclick="to_top()" id="top_btn">
<img src="Icons/uparrow.png" id="top_ico">
</button>
<div>
footer
</div>
Here is the CSS code:
#top_btn
{
--offset: 50px;
position: sticky;
float: right;
margin-right: 15px;
bottom: 20px;
place-self: end;
margin-top: calc(100vh + var(--offset));
padding: 10px;
background: #013328;
color: #e3dcd2;
border: none;
border-radius: 100px;
text-align: center;
cursor: pointer;
outline: none;
box-shadow: 0 9px #666;
}
#top_ico
{
height: 40px;
width: 40px;
}
#top_btn:hover
{
background-color: #013328;
}
#top_btn:active
{
background-color: #013328;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
Script used:
function to_top()
{
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
I attempted changing the button from sticky to fixed, which resolved the issue but compromised the style I desired where the button remains hidden in the sticky position until the user scrolls down slightly and then sticks to the bottom right corner of the screen.
Thank you all in advance!